IE z-index problem

I always test my website in both IE and FF for a fair compatibility. Then I ran into IE problem again.

Every z-index works fine in FF and I can’t click my buttons in IE.

I then figure out that the z-index is not working correctly in IE.

The cause is because IE needs the parent div of the nested div to have z-index too, then the nested div z-index will ‘active’.

Thanks again, IE.

Overlaping layer – z-index

z-index is use when you have layers of element and overlap each other.

They order of visibility is controlled by z-index.

.modalLayer1{
height: 50px;
width: 50px;
z-index: 6;
background-color:#000000;
position:absolute;
}

.modalLayer2{
height: 50px;
width: 50px;
z-index: 7;
background-color:#000000;
position:absolute;
}

The layer with larger z-index will be visible.

i.e. The larger z-index, the closer to the surface (viewer).

I think the z-index can go up to 1000 or even more.

So I just don’t care where it’s limit is…

REMARK: z-index need position to work together!

That is without position, all element are still on the same layer.

Visibility will according to their order on html.