Question

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

为此目的，我正在使用z-index。我正在设置我要隐藏的div的z-index 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中的链接不可点击（因为-ve z-index值），如果我将它设置为正数，它就不会隐藏在.down之后。

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

Answer 1

实际上z-index仅适用于position，因此我将position:relative;提供给您的.down课程。

请参阅下面提到的 CSS ＆amp; <强>样本

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

DEMO

Answer 2

为了让z-index相互叠加，你将同时定位两个元素。

更好的描述：

定义和用法

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

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

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

所以你需要：

.up {
    height: 100px;
    position: absolute;
}

Answer 3

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

在课程中进行这两项更改。由于你没有放置位置，Z-index将无法在.down中工作。而且，.box中不需要-ive z-index。 Z-index的工作方式与层类似，z-index 1的元素将位于z-index高于1的任何元素之下。为此，元素需要定位。

Answer 4

我也有同样的问题。我通过使用大于-1的值更改 z-index 值来解决此问题。

我制作了前层2，后面是1，所以它有效。

由于z-index，链接无法点击

4 个答案: