Exercises the CSS stacking-context algorithm (MDN: Positioned layout > Stacking context) - z-index ordering, opacity/transform establishing a stacking context, and out-of-flow content escaping a plain wrapper to compete at its true enclosing stacking context.
z: 1 (back) z: 2 (front) both siblings paint, in z-index order position:relative;z-index:1 / z-index:2 |
abs child absolutely-positioned child fades with its opacity parent opacity:0.5 parent, position:absolute child (no z-index) | abs child transform establishes a stacking context transform:rotate(6deg) parent, position:absolute child (no z-index) |
The nested box's own z-index:-1 competes against its true enclosing stacking context (the page), not just its immediate position:absolute parent (which has no z-index of its own, so does not itself establish a stacking context) - it must paint behind the sibling, not be trapped painting whenever the wrapper happens to.
sibling z: 0 nested z: -1 z-index:-1 box nested in a plain absolute wrapper position:absolute wrapper (no z-index) > position:relative;z-index:-1 |