Effect of z-index value to RP and AP blocks

by aplus

with help from Dave Hyatt

  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

Note: the original guide I published was erroneous in some significant parts, due to my miss-understanding of CSS2.1 spec. Within hours of linking this on WaSP Buzz, Dave Hyatt responded with clarification. I have updated this guide to reflect proper information, using maroon colour for corrections and additions.
For historical reasons, I have saved original pages - just add wrong/ to the URL of this page.

We have two RP blocks, and one AP block + one non-positioned paragraph in each of them. No z-index is applied.

CSS2.1 spec says that each positioned element defines stacking context for all its children if it has an integer z-index (i.e. non-auto). Further, if any of the child elements is positioned and has non-auto z-index, it defines new, internal stacking context. Nothing that is outside the stacking context can come between elements inside of the stacking context. If two elements have z-index:auto, the one that is later in the document order will be on the top.
Translated in english and applied to the situation I have here, it means that the correct overlapping order is (bottom to top):

You can imagine stacking contexts are solid boxes. No matter what you have or do inside of that box, its elements are constrained by those boxes and can not mix.

RP1: This is relatively positioned block

AP1: This is absolutely positioned block

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