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
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