盡管 z-index 內容超出了固定導航欄的頂部
[英]Content goes over top of fixed navbar despite z-index
問題描述
我想要固定導航欄下方的 go 的內容，但它超出了它的頂部。 我不知道該怎么做。
body { margin: 0; padding: 0; box-sizing: border-box; font-family: "Montserrat", "Arial", "Helvetica Neue", "Helvetica", sans-serif; }.navbar { display: flex; justify-content: space-between; box-shadow: 0px 5px 5px -7px; position: fixed; top: 0; width: 100%; z-index: 1000; }.logo { align-self: flex-start; padding: 0px 10px; }.logoutbutton { align-self: flex-end; margin: auto 30px; padding: 5px 10px; background: none; outline: none; border: 1px solid; border-radius: 2px; transition: 0.2s all; }.logoutbutton:hover { background: #eeeeee; }.layout-wrapper { display: flex; position: relative; top: 56px; }.left-navigation-drawer { display: block; position: fixed; height: 100vh; width: 270px; line-height: 50px; box-shadow: 5px 0px 5px -7px; }.left-navigation-drawer a { text-decoration: none; max-width: 100%; display: block; font-family: 'Open Sans', sans-serif; font-size: 16px; font-weight: 600; color: #000; padding-left: 20px; }.left-navigation-drawer a:hover { background-color: lemonchiffon; }.main-content { position: relative; left: 270px; padding-left: 50px; }
<body> <div class="navbar"> <div class="logo"> <h3>MyWebsite</h3> </div> <input class="logoutbutton" type="submit" value="Logout"> </div> <div class="layout-wrapper"> <div style="padding-top: 20px;" class="left-navigation-drawer"> <nav> <a href=""><span><i style="font-size:18px;" class="fas fa-keyboard"></i></span> Content</a> <a href=""><span><i style="font-size:18px;" class="fas fa-info-circle"></i></span> Account Details</a> <a href=""><span><i style="font-size:18px;" class="fas fa-user-cog"></i></span> Account Settings</a> </nav> </div> <div class="main-content"> <p>some text</p> <p>some text</p> <p>some text</p> <p>some text</p> <p>some text</p> <p>some text</p> <p>some text</p> <p>some text</p> <p>some text</p> <p>some text</p> <p>some text</p> <p>some text</p> <p>some text</p> <p>some text</p> <p>some text</p> <p>some text</p> <p>some text</p> <p>some text</p> <p>some text</p> <p>some text</p> <p>some text</p> <p>some text</p> <p>some text</p> </div> </div> </body> </html>
1 個解決方案
解決方案1
1 已采納 2020-07-15 08:17:04
您的代碼中的所有內容都很好，您需要為 header 添加背景顏色。
由於該元素是透明的，因此當您滾動它時，它會向下滾動，但由於沒有背景，它似乎從頂部移動。
在 css 之后更新添加背景顏色。
.navbar{
display: flex;
justify-content: space-between;
box-shadow: 0px 5px 5px -7px;
position: fixed;
top:0;
width: 100%;
z-index: 1000;
background:#fff;
}
body { margin: 0; padding: 0; box-sizing: border-box; font-family: "Montserrat", "Arial", "Helvetica Neue", "Helvetica", sans-serif; }.navbar { display: flex; justify-content: space-between; box-shadow: 0px 5px 5px -7px; position: fixed; top: 0; width: 100%; z-index: 1000; background: #fff; }.logo { align-self: flex-start; padding: 0px 10px; }.logoutbutton { align-self: flex-end; margin: auto 30px; padding: 5px 10px; background: none; outline: none; border: 1px solid; border-radius: 2px; transition: 0.2s all; }.logoutbutton:hover { background: #eeeeee; }.layout-wrapper { display: flex; position: relative; top: 56px; }.left-navigation-drawer { display: block; position: fixed; height: 100vh; width: 270px; line-height: 50px; box-shadow: 5px 0px 5px -7px; }.left-navigation-drawer a { text-decoration: none; max-width: 100%; display: block; font-family: 'Open Sans', sans-serif; font-size: 16px; font-weight: 600; color: #000; padding-left: 20px; }.left-navigation-drawer a:hover { background-color: lemonchiffon; }.main-content { position: relative; left: 270px; padding-left: 50px; }
<body> <div class="navbar"> <div class="logo"> <h3>MyWebsite</h3> </div> <input class="logoutbutton" type="submit" value="Logout"> </div> <div class="layout-wrapper"> <div style="padding-top: 20px;" class="left-navigation-drawer"> <nav> <a href=""><span><i style="font-size:18px;" class="fas fa-keyboard"></i></span> Content</a> <a href=""><span><i style="font-size:18px;" class="fas fa-info-circle"></i></span> Account Details</a> <a href=""><span><i style="font-size:18px;" class="fas fa-user-cog"></i></span> Account Settings</a> </nav> </div> <div class="main-content"> <p>some text</p> <p>some text</p> <p>some text</p> <p>some text</p> <p>some text</p> <p>some text</p> <p>some text</p> <p>some text</p> <p>some text</p> <p>some text</p> <p>some text</p> <p>some text</p> <p>some text</p> <p>some text</p> <p>some text</p> <p>some text</p> <p>some text</p> <p>some text</p> <p>some text</p> <p>some text</p> <p>some text</p> <p>some text</p> <p>some text</p> </div> </div> </body> </html>
具有絕對位置和較低z-index的div顯示在較高z-index（固定位置）的頂部
[英]Div with position absolute and lower z-index is showing on top of a higher z-index(fixed position)
使用 z-index relative 將固定子元素定位在下一個元素的頂部
[英]Position fixed child on top of next element with z-index relative
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.