What Creates a New Stacking Context in CSS?

A stacking context is a three-dimensional conceptualization of HTML elements along the imaginary z-axis relative to the user. Understanding what triggers a new stacking context is essential for mastering CSS layering, as child elements within a stacking context cannot escape their parent’s stacking order, regardless of their own z-index values. This article covers the primary CSS properties and values that generate new stacking contexts, from classic positioning rules to modern CSS layout and compositing features.

The Root Stacking Context

The base stacking context is automatically established by the root element of the document, which is the <html> element in standard web pages. Every other element on the page exists within this initial context unless a distinct property creates a localized sub-context.

Position and z-index

The most traditional method for instantiating a new stacking context involves combining CSS positioning with the z-index property.

  • Positioned elements with an explicit z-index: Any element with a position value of relative, absolute, or fixed (in older browser specs) that also has a z-index value other than auto forms a stacking context.
  • Sticky and fixed positioning: An element with position: fixed or position: sticky always creates a stacking context in modern browsers, even if z-index is set to auto.

Flexbox and Grid Child Items

Direct children of flex containers (display: flex or display: inline-flex) and grid containers (display: grid or display: inline-grid) generate a stacking context when their z-index property is set to any value other than auto. Unlike standard block-level elements, flex and grid items do not require explicit position declarations to utilize z-index for stacking context creation.

Visual and Transform Properties

Several visual rendering and compositing properties force the browser to composite an element separately, resulting in the creation of a new stacking context:

  • Opacity: An element with an opacity value strictly less than 1.
  • Transform: An element with a transform property value other than none (such as scale(), translate(), or rotate()).
  • Filter: An element with a filter property value other than none (such as blur(), drop-shadow(), or grayscale()).
  • Perspective: An element with a perspective value other than none.
  • Clip-path and Masking: An element with clip-path, mask, mask-image, or mask-border applied with a value other than none.

Isolation and Containment

Modern CSS provides explicit mechanisms for isolating components and managing rendering boundaries:

  • The isolation property: Setting isolation: isolate is the most explicit and semantic way to create a new stacking context without altering visual styles or layout behavior.
  • Containment: Elements with contain values of layout, paint, strict, or content form a new stacking context as part of browser rendering optimization.
  • Container queries: Setting container-type to inline-size or size can establish formatting contexts that encapsulate rendering layers.

Compositing and Performance Properties

  • Mix-blend-mode: An element with mix-blend-mode set to any value other than normal.
  • Will-change: An element with a will-change property specifying any property that would create a stacking context on its own (for instance, will-change: transform or will-change: opacity).

Stacking Context Containment

Once a stacking context is formed, all descendant elements are grouped and rendered within that single layer relative to elements outside of it. A child element with z-index: 9999 inside a parent element with z-index: 1 will never appear in front of an external sibling element with z-index: 2. Managing these boundary conditions ensures predictable layer stacking and prevents common layout conflicts.