[英]Making top navigation bar fixed when its position is set as relative
如何將頂部導航欄固定在頂部？
我理解通常情況下，您會將position: fixed到 boxA，但這在這種情況下不起作用，因為它的位置必須設置為相對位置。 整個頂部導航欄是粘性的，所以當人們向下滾動時它會留在頁面上
.boxA:after { content:""; display: block; clear: both; } .boxA { height: 90px; position: relative; border-bottom: 1px solid #E0DCDC; } .boxA img { position: absolute; top: 50%; left: 3%; transform: translate(0, -50%); } .box2 ul { position: absolute; top: 50%; transform: translate(0, -50%); right: 10px; } .box1 { float: left; width: auto; } .box2 { float: right; width: auto; } .box2 ul { margin: 0; padding: 0; list-style: none; } .box2 li a { display: block; padding: 0px 50px; color: inherit; text-decoration: none; font-size: 12px; } .box2 li a:hover { text-decoration: underline; } .box2 ul:after { content: ""; display: block; clear: both; } .box2 li { float: left; width: auto; font-family: 'Gotham'; letter-spacing: 2.5px; } .box1 img { position: absolute; height: 20px; }
<div class="boxA"> <div class="box1"> <div class="site"> <a href=""><img src="https://via.placeholder.com/140x100"></a> </div> </div> <div class="box2"> <nav class="menu"> <ul> <li><a href="#conD">menu1</a></li> <li><a href="#conG">menu2</a></li> <li><a href="#conH">menu3</a></li> <li><a href="#conI">menu4</a></li> </ul> </nav> </div> </div>
我嘗試在div class="boxA" div class="top-nav"正上方添加div class="top-nav" ，並將div class="boxA"導航的位置指定為固定，但這不起作用。
為您的身體增加高度以更好地理解。 將位置固定和頂部 0 和寬度 100% 添加到您的 boxA 類
body { height: 900px; } .boxA:after { content:""; display: block; clear: both; } .boxA { height: 90px; position: fixed; border-bottom: 1px solid #E0DCDC; top: 0; width: 100%; background: #fff; -webkit-box-shadow: 0 4px 6px 0 rgba(12, 0, 46, .08); box-shadow: 0 4px 6px 0 rgba(12, 0, 46, .08); } .body_part { margin-top: 100px; } .boxA img { position: absolute; top: 50%; left: 3%; transform: translate(0, -50%); } .box2 ul { position: absolute; top: 50%; transform: translate(0, -50%); right: 10px; } .box1 { float: left; width: auto; } .box2 { float: right; width: auto; } .box2 ul { margin: 0; padding: 0; list-style: none; } .box2 li a { display: block; padding: 0px 50px; color: inherit; text-decoration: none; font-size: 12px; } .box2 li a:hover { text-decoration: underline; } .box2 ul:after { content: ""; display: block; clear: both; } .box2 li { float: left; width: auto; font-family: 'Gotham'; letter-spacing: 2.5px; } .box1 img { position: absolute; height: 20px; }
<body> <div class="boxA"> <div class="box1"> <div class="site"> <a href=""><img src="https://via.placeholder.com/140x100"></a> </div> </div> <div class="box2"> <nav class="menu"> <ul> <li><a href="#conD">menu1</a></li> <li><a href="#conG">menu2</a></li> <li><a href="#conH">menu3</a></li> <li><a href="#conI">menu4</a></li> </ul> </nav> </div> </div> <div class="body_part"> <img src = "https://via.placeholder.com/350x150"> </div> </body>
HTML元素設置為相對位置涵蓋了頂部導航欄設置為固定
[英]HTML Element set to Relative Position covers Top Navigation bar set to Fixed
固定 position 時，樣式卡會越過我的頂部導航欄的頂部
[英]Styling cards are going over the top of my top Nav bar when making position fixed
Position：固定在導航欄上，但是當我單擊打開導航按鈕時，我的頁腳堆疊在它上面
[英]Position: fixed on the navigation bar but my footer is stacking on top of it when I click the open navigation button
將導航欄設置為“固定”時，下拉菜單在導航欄中無法正常工作。
[英]Dropdown menu not working properly in navigation bar when said navigation bar is set to position:fixed;
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.