我有一个固定的导航栏,滚动时它会跟随。
但是在标签内滚动文本/图像时,它似乎在导航栏前面,而不是在后面。
这是为什么?我该如何解决?
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>
最佳答案
这通常是由您的 z-index 引起的,请确保您输入:
CSS
z-index: 500 // or whatever number that is a positive real number.
是的,我是对的,看到这个 DEMO .
关于html - 正文超出固定导航栏的顶部,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/30997510/