The CSS Z-Axis: Stacking Contexts and Z-Index

The source provides an exhaustive technical analysis of CSS stacking contexts, defining this fundamental concept as the hierarchical structure that controls the layering of elements along the z-axis. It meticulously outlines the strict, multi-step painting algorithm derived from the CSS2.1 specification, which defines the order in which all elements, from backgrounds and borders to floats and inline content, are painted within a context. A major focus is placed on how the z-index property, utilizing negative, zero, and positive values, determines an element’s precise stack level and whether it forms a new, isolating stacking group for its descendants. The document also addresses the complexities introduced by modern CSS, covering how elements with opacity or transform, or specific layout types like Flexbox/Grid items, automatically trigger new stacking contexts. Furthermore, the analysis differentiates stacking from related layout concepts like containing blocks and formatting contexts and maps the theoretical model to practical implementation details used by rendering engines like Blink/Chrome to manage compositing layers.