user1251698 user1251698 - 1 month ago 9
CSS Question

Links not clickable because of z-index

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/

Answer Source

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