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 us

Solution 1:

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 00 green;
        height: 400px;
        overflow: hidden;
        position: relative;
        z-index: 2;
    }

DEMO

Solution 2:

In order for z-index's to go on top of each other you will both elements to have positioned.

A better description:

Definition and Usage

The z-index property specifies the stack order of an element.

An element with greater stack order is always in front of an element with a lower stack order.

Note: z-index only works on positioned elements (position:absolute, position:relative, or position:fixed).

So you will need:

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

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

Make these 2 changes in the classes. Z-index won't work in .down as you didn't put position. And, there is no need for the -ive z-index in .box. Z-index works like layers, an element with z-index 1 will be under any element that has higher z-index than 1. Ofcourse for this to work the elements need to be positioned.

Solution 4:

I had the same problem too. I solved it by changing the z-index values with a value greater than -1.

I made the front layer 2 and behind 1, so it worked.