Html 正文文本越过固定导航栏的顶部
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/30997510/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
提示：将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间：2020-08-29 11:41:17 来源:igfitidea点击:
Body text goes over the top of fixed nav bar
提问by Spaccee
I have a fixed nav bar, that follows when scrolling.
我有一个固定的导航栏，滚动时会跟随它。
But upon scrolling over text/images within tags it seems to go in front of the navbar, rather then behind.
但是在标签内滚动文本/图像时，它似乎位于导航栏的前面，而不是后面。
Why is this? How can I fix it?
为什么是这样？我该如何解决？
nav {
background-color: #262626;
height: 60px;
width: 100%;
position: fixed;
top: 0;
bottom: 0;
-webkit-box-shadow: 0px 0px 8px 0px #000000;
-moz-box-shadow: 0px 0px 8px 0px #000000;
box-shadow: 0px 0px 8px 0px #000000;
}
nav a {
font-family: 'Open Sans', sans-serif;
font-size: 16px;
line-height: 60px;
text-transform: uppercase;
margin: 7px;
}
nav a:link {
color: #C8C8C8;
-o-transition: .5s;
-ms-transition: .5s;
-moz-transition: .5s;
-webkit-transition: .5s;
transition: .5s;
}
nav a:visited {
color: #C8C8C8;
}
nav a:hover {
color: #199ABA;
}
#menu {
margin-right: 375px;
margin-left: 375px;
text-align: right;
margin-top: 0px;
margin-bottom: 0px;
}
#headertop {
margin: 0px;
width: 100%;
height: 650px;
font-family: 'Open Sans', sans-serif;
}
#headertop h1 {
position: absolute;
margin-left: 375px;
margin-right: 375px;
margin-top: 178px;
line-height: 45px;
font-size: 50px;
color: #33CCFF;
width: 550px;
height: 100%;
}<nav>
<div id="menu">
<strong><a href="index.html" style="text-decoration:none">Home</a></strong>
</div>
</nav>
<div id="headertop">
<h1>THANKS</h1>
</div>回答by ARLCode
回答by RevanthKrishnaKumar V.
nav {
background-color: #262626;
height: 60px;
z-index:1; //any higher integer value
width: 100%;
position: fixed;
top: 0;
bottom: 0;
-webkit-box-shadow: 0px 0px 8px 0px #000000;
-moz-box-shadow: 0px 0px 8px 0px #000000;
box-shadow: 0px 0px 8px 0px #000000;
}
Refer z-index in W3Schoolsalso Refer CSS-Tricks
