Links not clickable because of z-index

css, html

Solution

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

Problem

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? ``` .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; } ``` ``` <div class="wrap"> <div class="up"> <div class="box"><a href="#">Should hide</a></div> </div> <div class="down">Should be visible</div> </div> ``` 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/

Original source