ie6下z-index在relative里的bug

The other day when working on my latest website; I had everything working fine until I decided to check how things looked in IE. Usually IE7 plays pretty well, but in this instance there was a pretty crucial problem. I had an absolutely positioned div (hover menu) and under it I had a transparent PNG that was also absolutely positioned as well.

The absolutely positioned div had a z-index of 1000, but @jorenrapini pointed out that IE doesn’t use z-index properly. I came across this quirksmode.org article that explained the flaw in detail:

“In Internet Explorer positioned elements generate a new stacking context, starting with a z-index value of 0. Therefore z-index doesn’t work correctly”

The above article does not contain a workaround but in the comments a fellow mentioned that giving the parent element a higher z-index actual fixes the bug. Don’t ask me why this works but it does!

view source

print?

1	<div style="z-index: 3000">

2	<div style="position:absolute;z-index:1000;">

3	<a href="#">Page</a>

4

...

5

</div>

6

</div>

7	<img style="position:absolute" src="myimage.png" />