z-indexvalue to RP and AP blocks
z-indexto both AP blocks
z-indexto RP2 than to RP1, but identical
z-indexto AP1 and AP2
z-indexwhere RP2 > RP1, and AP2 < AP1, both being higher then any RP's
In the light of the previous discussion, if I apply
z-index:1 to AP1, it will still have to stay below RP2 box. That value of
1 is z-axis position of AP1 inside of the RP1 context. The highest possible value of anything inside of RP1 should still be rendered below the lowest possible value of anything inside of RP2 context.
Amazingly enough, Internet Explorers (both Win and Mac) are the only browsers that do this properly!
z-index, which is
Why they do this? Why browsers that boasts with standard-compliance all violate the spec in the same manner?
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-indexvalue AP1 has.
z-index, then KHTML browsers render as "expected" (AP with higher
z-indexis above, see next page)
When I first encountered this, I thought that I must have read the spec wrong. But after many re-reads, I can only conclude that IE is the one that does this correct.
So the question remains, why modern browsers do this?
Quite simply, speaking from extensive practical work on CSS2 layouts, they do this because it makes sense.
For instance, if I have multi-level menu where each item is RP (for easy positioning of its submenu):
You would want that Products submenu pops-up above Contact and Help items - give it
z-index:10000 and you are ok, right? Well, according to standard, no; no matter what
z-index is, that submenu must reside inside of the Products stacking context, which means it should appear below the following RP contexts (for Contact and Help).
There are many situations where standard-compliant behavior creates big problems. One such situation is driving me crazy these days - it was the very thing that drove me to write all this, as I was trying to clear this up for me, looking for solution.
It's a sad irony that the one thing IE implements correctly makes it harder to do such effective things. I would say that CSS spec writers went for logical, but much less practical model (not for the first time).
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...
Continue to next page >>
RP = relatively positioned element
AP = absolutely positioned element