z-index when using ::after under element

Question

If we use z-index combined with position: absolute; its possible to place the ::before of a element under itself. There is a good exam

Answer 1

Specifying z-index you are creating a new stacking content;

if this is done only on the child ::after pseudo-elem the parent won't establish a new stacking content and everything will work as expected.

But adding z-index on the parent element will start a new stack (which will also wrap the child-stack..).
And if you look at the first 2 points on stack rendering specification you'll see background will be rendered before other child-stacks:

Within each stacking context, the following layers are painted in back-to-front order:

1. the background and borders of the element forming the stacking context.
2. the child stacking contexts with negative stack levels (most negative first).
3. ... ...

here's an example, to clarify the different rendering behavior for nested stacking background.

---

position: relative is not optional; with the default position:static, z-index has no effect.