Question

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

我让nav div的z-index为-1，而我顶部的div的z-index为1.所以我的导航在div下面。但是当你向下滚动时，我有另一个z-index为-2的div，但我的导航仍然在它下面。任何人都可以告诉我如何使固定导航在第一个元素下进行并超过第二个元素吗？

希望我明确表达了我的要求和解释。

Answer 1

问题与如何计算元素的堆叠有关。您只需要将position: relative添加到您想要使用的div中。

使用这个基本的HTML：

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

这个基本的CSS：

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

Here is the JSFiddle

Answer 2

你可以解决这个问题，在导航中添加一个内部div并添加位置：相对于该div，它将完美地工作

Answer 3

设置位置：相对将解决问题，因为z-index仅适用于定位元素（位置：绝对，位置：相对或位置：固定）< / p>

Css Z-index Under和Over

3 个答案: