Effect of z-index value to RP and AP blocks

by aplus

  1. Starting setup
  2. Apply z-index:1 to AP1
  3. Apply z-index to both AP blocks
  4. Apply z-index:11 to RP1
  5. Apply z-index:21 to RP1
  6. Apply higher z-index to RP2 than to RP1, but identical z-index to AP1 and AP2
  7. Apply z-index where RP2 > RP1, and AP2 < AP1, both being higher then any RP's
  8. Conclusion

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.

Continue to next page >>

RP = relatively positioned element
AP = absolutely positioned element