Effect of z-index value to positioned elements
In the light of the previous discussion, if I apply z-index:1 to AP1, it will be placed above anything else. That value of 1 is z-axis position of AP1 inside of the root (page) context.
RP1: This is relatively positioned block
AP1: This is absolutely positioned block, with z-index:1
Content between the RP blocks... Content between the RP blocks... Content between the RP blocks... Content between the RP blocks...
RP2: This is relatively positioned block
AP2: This is absolutely positioned block
Content after the second RP block... Content after the second RP block... Content after the second RP block... Content after the second RP block...
Windows Internet Explorer 6 and 7 and all Mac versions are not following the spec. It seems that they define stacking context even for z-index:auto. Thus, RP1 and anything inside of it (including AP1) stays below RP2 and its content, as the following screenshots illustrate.
Reference rendering
IE6/7 rendering
IE8 shines with its new standard-compliant engine and works as expected.
Safari (up to version 1.2.3) and quite possibly other KHTML browsers of the same code base, slightly violate the spec, in the case of AP2 having z-index:auto; in that case, AP1 will be above all non-positioned content inside of RP2, but below any AP elements inside of RP2, no matter what z-index value AP1 has.
If AP2 has defined z-index, then KHTML browsers render as "expected" (AP with higher z-index is above, see next page)
This is corrected Safari 1.3 and above.
Speaking from extensive practical work on CSS2 layouts, IE6/7's implementation is much harder to work with.
For instance, if I have multi-level menu where each item is RP (for easy positioning of its submenu):
- Overview
- Products
- Electronics
- Garden tools
- Home appliances
- Contact
- Help
You would want that Products submenu pops-up above Contact and Help items - give it z-index:10000 and you are ok, right? Well, not in IE6/7; no matter what z-index is, that submenu reside inside of the false Products stacking context, which means it will appear below the following false RP contexts (for Contact and Help).