Effect of z-index value to RP and AP blocks

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

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. Further, if any of the child elements is positioned, it defines new, internal stacking context. Nothing that is outside the stacking context can come between elements inside of the stacking context.
Translated in english and applied to the situation I have here, it means that:

• RP1 and RP2 are two separate worlds
• their child elements should never mix
• AP1 is above the non-positioned paragraph in RP1, but below RP2 and anything inside of it

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. The whole RP1 box can either be totally above or totally below RP2. It can't happen that one part of RP1 is below RP2 and other part is above RP2.

• Opera 7.5 is erroneous about this. It will render AP1 element above all RP and non-positioned elements, unconditionally. That means that it goes over non-positioned content in the RP2 but below AP2.
  By doing so, it inserts elements from outside the RP2 stacking context between elements inside of the RP2 context, in direct violation of the CSS 2.1 spec (and CSS2 too).

Continue to next page >>

RP = relatively positioned element
AP = absolutely positioned element