CSS: Filling the Gaps 4 (Stacking Context)

An HTML document may seem like a flat plane, but in reality, HTML elements exist in three dimensions. That is, in addition to the X and Y axes, there is also the Z axis.

A stacking context in the document is formed by any element that meets any one of the following conditions:

The document root element (<html>);
Elements with position set to absolute or relative and a z-index value other than auto;
Elements with position set to fixed (fixed positioning) or sticky (sticky positioning);
Children of a flex or grid container, with a z-index value other than auto;
Elements with an opacity value less than 1 (see the specification for opacity);
Elements with any of the following properties set to a value other than none:
- transform
- filter
- backdrop-filter
- perspective
- clip-path
- mask / mask-image / mask-border
Elements with isolation set to isolate;
Elements whose will-change value specifies a property that creates a stacking context when set to a non-initial value (refer to this article);
Elements with contain set to layout, paint, or a composite value that includes one of them (e.g., contain: strict, contain: content).

The z-index value of a child stacking context only makes sense within its parent.