由于z-index，链接无法点击 [英] Links not clickable because of z-index

问题描述

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

为此，我使用 z-index 。我设置了要隐藏的div的 z-index 1，以及高得多的 z-index 为其他div。但是它不隐藏div。如果我将 z-index 设置为-1，那么它隐藏，但是该div上的链接不再是可点击的。

这是我的代码：

HTML： / p>

 < div class =wrap> 
< div class =up>< div class =box>< a href =＃>应隐藏< / a>< / div>< / div& 
< div class =down>应该可见< / 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/

解决方案

实际上 z-index 位置，所以我给你的 .down 类给了 position：relative; p>

请参阅下文 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

I have a div with absolute position on a page which overlaps on another div when scrolling. I want to make it invisible when it scrolls to a specific div.

For that purpose, I'm using the z-index. I'm setting the z-index 1 of the div which I want to hide, and much higher z-index for the other div. However it does not hide the div. If I set the z-index to -1 then it hides but then the links on that div are no more clickable. How can I fix this?

Here's my code:

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

So the problem in above example is that the links in the .box are not clickable (because of -ve z-index value), and if I set it positive, it wont hide behind the .down.

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

解决方案

Actually z-index only works with position so I gave the position:relative; to your .down class.

See the mentioned below 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

这篇关于由于z-index，链接无法点击的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！