z-index
value to RP and AP blocksz-index:1
to AP1z-index
to both AP blocksz-index:11
to RP1z-index:21
to RP1z-index
to RP2 than to RP1, but identical z-index
to AP1 and AP2z-index
where RP2 > RP1, and AP2 < AP1, both being higher then any RP's
Fun starts when you apply z-index
to RP elements. What happens when RP1 is given integer z-index
, which is lower then what AP2 has, and RP2 still has z-index:auto
?
I again moved the RP1 to overlap with RP2 so you witness the chaos.
In IE, even z-index:1
(I used 11 here for a different purpose, see below) on RP1 is enough to raise all its children above anything inside of RP2. It moves the whole RP1 stacking box (context) above the RP2 stacking box, as it should do.
In anything else, it will move RP1 above RP2, but AP1 (z-index:10) stays below AP2 (z-index:20) - total intermixing of contexts. I intentionaly used 11 to illustrate that z-index
values do not add: 11(RP1) + 10(AP1) = 21 > 20(AP2), but AP1 is still below AP2.
RP1: This is relatively positioned block, with z-index:11
AP1: This is absolutely positioned block, with z-index:10
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, with z-index:20
Content after the second RP block... Content after the second RP block... Content after the second RP block... Content after the second RP block...
Now, you might be tempted to think..."OK, it seems that all but IE stack RP and AP elements separately, where APs are always above the RPs". Heh...not a chance.
RP = relatively positioned element
AP = absolutely positioned element