我有一个样式表,其目的是有一个固定的导航栏,无论你向下滚动多远,它都会保持在屏幕的顶部.为此,我刚刚使用了position：fixed; – 但是当我实际向下滚动时,#content div会覆盖它并直接越过顶部(因此导航栏位于页面顶部但位于内容div下方.)
多年来我没有做过任何严肃的CSS编码,所以我有点生疏 – 这可能是一个非常简单的解决方案,所以道歉是如此微不足道！
style.css文件
body {
margin:0;
background:#eeeeee;
}
#navbar {
background-color:#990000;
position:fixed;
width:100%;
height:50px;
text-align:center;
vertical-align:middle;
line-height:50px;
top:0px;
}
#navbar a {
color:#fff;
}
#content {
background:#eeeeee;
margin-top:50px;
width:100%;
}
#Feed {
background: #fff;
position:absolute;
left:22%;
width:776px;
}
页面结构如下：
<body>
<div id="navbar"><?PHP include core/navbar.PHP; ?></div>
<div id="content">
<div id="Feed">
CONTENT
</div>
</div>
</body>
解决方法
为了解决这个问题,您需要使用属性z-index
defined by W3来指定元素的级别.试试这个：
#navbar {
background-color:#990000;
position:fixed;
z-index:1; /*Add this*/
width:100%;
height:50px;
text-align:center;
vertical-align:middle;
line-height:50px;
top:0px;
}
