CSS Stacking Context: Understanding Z-Axis Display Logic

This article explains CSS stacking context, stacking level, and stacking order concepts to clarify the internal logic of Z-axis display order for web elements. It begins by addressing common confusion about Z-axis positioning compared to X and Y axes, noting that while developers understand basic z-index usage, deeper principles remain unclear.

The article demonstrates stacking context through examples showing how z-index values affect element positioning. It explains that when parent containers have z-index set to auto, child elements can appear behind the parent, but when z-index is set to 0, children cannot penetrate the parent container. The article illustrates how z-index values create stacking contexts that affect child element positioning.

Key characteristics of stacking contexts are outlined: they can be nested, with inner contexts constrained by outer ones; each context and its siblings are independent, considering only descendants during rendering; and unspecified z-index defaults to the same level as z-index:0 but higher than normal elements.

Three main ways to create stacking contexts are described: the root element, positioned elements with numeric z-index values, and various CSS3 properties including flex items with non-auto z-index, elements with opacity not equal to 1, transformed elements, and filtered elements.

The article distinguishes between stacking order (the vertical display sequence on the Z-axis) and stacking level (a descriptive term for an element's position in the stacking order). It explains that when elements share the same stacking context and order, those appearing later in the DOM flow will cover earlier ones.

Stacking rules are detailed: when all elements are stacking contexts with explicit z-index values, higher values appear above lower ones; within the same context, elements follow specific stacking rules; and when stacking levels and orders match, later DOM elements cover earlier ones.

The article concludes with references to additional resources for deeper understanding of CSS stacking contexts and z-index behavior.