我有一个样式表,其目的是让一个固定的导航栏保持在屏幕的顶部,无论你向下滚动多远。为此,我刚刚使用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>
答案 0 :(得分:17)
要解决此问题,您需要指定元素级别的属性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;
}
答案 1 :(得分:0)
如果您使用的是Bootstrap 4,.navbar背景会很清晰,并且可以被某些元素覆盖。设置z-index无效。使用背景颜色,例如.bg-white。
<nav class="navbar fixed-top navbar-expand-sm navbar-light bg-white">