THIS IS CONTAINER
position:relative, no z-index specified.
This is box 1

styles:

position: absolute;

z-index: 20;

 


this box is INSIDE container div, positioned relative

This is box 2

styles:

position: absolute;

z-index 10;

This box is only inside the body tag.

IE z-index bug

To the right are 2 boxes that are absolutely positioned; the lime-green box has a z-index value of 10 and the yellow box has a z-index of 20. The only difference between the boxes is that the yellow box is wrapped in a division that has position:relative and is the first box defined in the sourcecode.

Basically the fact that the yellow box is wrapped in a relative positioned element should not effect the stacking order: the CSS specification clearly states that only positioned elements that have a computed z-index value other than 'auto' generate a new stacking context. The relative positioned element does not have a z-index value defined, so it should not influence the stacking order of it's child-elements.

It appears that in Internet Explorer (windows) positioned elements do generate a new stacking context, starting with a z-index value of 0, causing the lime-green box to appear above the yellow box.

This is a serious violation of the CSS specifications, causing headages and a lot of misunderstanding of what z-index really does.

This bug is still present in IE7, IE8 fixes it in it's standards compliant mode.

Updated 17-04-2009, crisp@xs4all.nl