内容div越过固定的导航栏

时间:2013-12-30 13:16:57

标签: css

我有一个样式表,其目的是让一个固定的导航栏保持在屏幕的顶部,无论你向下滚动多远。为此,我刚刚使用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>  

2 个答案:

答案 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">