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

Question

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

为此,我正在使用z-index.我正在设置z-index我想隐藏的div 的1,而z-index另一个div的设置要高得多.但它并没有隐藏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和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;
    }

DEMO

Answer 2

为了让z-index相互重叠,你将同时定位两个元素.

更好的描述:

定义和用法

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

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

注意:z-index仅适用于定位元素(位置:绝对,位置:相对或位置:固定).

所以你需要:

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

Answer 3

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

我把前面的层做了2层，后面的层做了1层，这样就成功了。