Why does z-index: -1; appear above z-index: 1;?

Question

Explain this behavior:

Answer 1

Setting a positioned element's z-index to anything other than auto (the initial value) causes the element to generate a new stacking context for its descendant boxes.

This prevents any of its descendants from appearing below it, including the div:before pseudo-element, even if their z-index is negative. Of course, any descendant with a negative z-index will continue to appear below a descendant with a zero or positive z-index within the containing element, but that containing element will always be at the very back.¹

The rest of your div elements that don't have a z-index set will use the initial value instead, and therefore not generate stacking contexts for their pseudo-elements, allowing the pseudo-elements to appear below the real elements. The stacking context in which they are drawn instead is that of body.

---

¹ _{Note that the content of a stacking context root will still appear above the background of a descendant with a negative z-index. This is intentional, and is covered in greater detail in this answer, with relevant links to the spec.}