Html Css Z索引在下方和上方

我有一个导航div固定在屏幕顶部，在我的页面顶部有一个div占据整个屏幕

我让导航div的z指数为-1，我在顶部的div的z指数为1。所以我的导航在div下面。但是当你向下滚动时，我有另一个z索引为-2的div，但是我的导航仍然在它下面。有谁能告诉我如何使固定导航在第一个元素下面，在第二个元素上面

---

希望我能清楚地说明我的问题和我的解释。

问题与如何计算元素的堆叠有关。 您只需将

position:relative

添加到要进入的div中

使用此基本HTML：

<div id="nav"></div>
<div id="top"></div>
<div id="next"></div>
<div id="bottom"></div>

---

您可以通过在导航中添加一个带有的内部div来解决此问题，并添加位置：相对于该div，它将完美地工作

设置位置：相对将解决此问题，因为z索引只对定位元素起作用（位置：绝对、位置：相对或位置：固定）

没有一些代码就很难调试。然而，我的猜测是，您有一个单独的堆叠上下文，这使问题变得复杂。查看这篇非常有用的文章以了解更多信息-

#nav {
    height: 100px;
    width:100%;
    background: red;
    z-index: -1;
    position:fixed;
}

#top {
    height: 400px;
    width:100%;    
    background: white;    
    z-index: 1;
}

#next {
    position: relative;
    height: 100px;
    width:100%;    
    background: blue;    
    z-index: -2;
}

#bottom {
    height: 400px;
    width:100%;    
    background: blue;    
    z-index: -2;
}