28

我有一个页面上有一个绝对位置的 div，它在滚动时与另一个 div 重叠。当它滚动到特定的 div 时，我想让它不可见。

为此，我正在使用z-index. 我正在设置z-index要隐藏的 div 的 1，而其他 div 的设置要高得多z-index。但是它不会隐藏 div。如果我将其设置z-index为 -1，那么它会隐藏，但该 div 上的链接将不再可点击。我怎样才能解决这个问题？

这是我的代码：

HTML：

<div class="wrap">
    <div class="up"><div class="box"><a href="#">Should hide</a></div></div>   
    <div class="down">Should be visible</div>
</div>

CSS：

.wrap{
    width: 300px;
    position: relative;
    overflow: hidden;
    border: 1px solid #000;

}
.up{
    height: 100px;   
}

.box{
    position: absolute;
    top: 20px;
    background: yellow;
    width: 100px;
    height: 100px;
    z-index: -1; 
}

.down{
    background: green;
    overflow: hidden;
    z-index: 200;
    height: 400px;
}

所以上面例子中的问题是.box中的链接不可点击（因为-vez-index值），如果我将它设置为正，它不会隐藏在.down后面。

JSFiddle：http: //jsfiddle.net/G2xRA/

4

4 回答 4

31

实际上z-index只适用于position所以我给了position:relative;你的.down课。

请参阅下面提到的CSS & DEMO。

.box{
        position: absolute;
        top: 20px;
        background: yellow;
        width: 100px;
        height: 100px;
        z-index: 1;  
    }

    .down {
        background: none repeat scroll 0 0 green;
        height: 400px;
        overflow: hidden;
        position: relative;
        z-index: 2;
    }

演示

于 2012-12-10T09:59:04.877 回答
11

为了使 z-index 相互叠加，您将两个元素都定位。

更好的描述：

定义和使用

z-index 属性指定元素的堆栈顺序。

具有较大堆栈顺序的元素始终位于具有较低堆栈顺序的元素之前。

注意：z-index 仅适用于定位元素（位置：绝对、位置：相对或位置：固定）。

所以你需要：

.up {
    height: 100px;
    position: absolute;
}
于 2012-12-10T09:51:48.983 回答
4 
.box{
    position: absolute;
    top: 20px;
    background: yellow;
    width: 100px;
    height: 100px;
    z-index: 1;  
}

.down{
    background: green;
    overflow: hidden;
    z-index: 2;
    height: 400px;
    position:relative;
}

在类中进行这 2 项更改。Z-index 在 .down 中不起作用，因为您没有放置位置。而且，.box 中不需要 -ive z-index。Z-index 像层一样工作，z-index 为 1 的元素将位于 z-index 高于 1 的任何元素下。当然，要使其正常工作，需要定位元素。

于 2012-12-10T09:56:48.827 回答
3

我也有同样的问题。我通过将z-index值更改为大于 -1 的值来解决它。

我做了前面的第 2 层和后面的第 1 层，所以它起作用了。

于 2017-08-19T16:56:32.773 回答