Css 内容div越过固定导航栏_Css

Css 内容div越过固定导航栏

css

Css 内容div越过固定导航栏,css,Css,我有一个样式表，它的目的是有一个固定的导航条，无论你向下滚动多远，它都会保持在屏幕的顶部。为此，我刚刚使用了position:fixed-但当我实际向下滚动时，#contentdiv会覆盖它，并直接从顶部移动（因此导航栏位于页面顶部，但在content div下方。）我已经好几年没有做过任何认真的CSS编码了，所以我有点生疏了——这可能是一个非常简单的解决方案，所以很抱歉这么琐碎 style.css body { margin:0; background:#eeeeee; }

我有一个样式表，它的目的是有一个固定的导航条，无论你向下滚动多远，它都会保持在屏幕的顶部。为此，我刚刚使用了

position:fixed

-但当我实际向下滚动时，

#content

div会覆盖它，并直接从顶部移动（因此导航栏位于页面顶部，但在content 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

。试试这个：

#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;
}

如果您使用的是Bootstrap4，.navbar背景清晰，可以被一些元素覆盖。设置z索引将不起作用。使用背景色，例如bg白色

<nav class="navbar fixed-top navbar-expand-sm navbar-light bg-white">

2018，这仍然像一个魅力。谢谢@DaniP2020，它很有效。我想我们都错过了Z-Index2021，这仍然有效！