Z-index and Stacking Context

z-index controls the stacking order of positioned elements along the Z axis (front to back). Higher values appear on top of lower values when elements overlap.

z-index has no effect on elements with position: static (the default). You must have relative, absolute, fixed, or sticky for z-index to apply.

Without explicit z-index, elements stack in this order (back to front):

1. Root element background
2. Block-level elements (in flow order)
3. Floated elements
4. Inline elements
5. Positioned elements with z-index: auto or 0

A stacking context is a layer of elements with a common z-axis. Z-index values only compete within the same stacking context. An element inside a stacking context cannot be placed above elements outside it, regardless of z-index value.

A new stacking context is created by:

• position + z-index other than auto
• opacity less than 1
• transform, filter, perspective applied
• will-change on specific properties
• isolation: isolate
• Flex/grid children with z-index

Use isolation: isolate to create a stacking context intentionally without any visual side effects. Useful for UI components that need to contain their own z-index layers.

Projects often suffer from "z-index wars" where developers compete by escalating values to 9999 or 99999. Solve this with a named z-index scale using CSS variables:

Negative z-index values place elements behind the containing block's background. This can be used for decorative pseudo-element layers placed behind content.

When a modal or tooltip appears behind another element, the culprit is usually a stacking context on an ancestor with a low z-index. Use DevTools's 3D View or check opacity, transform, and filter on parent elements.

Flex and grid items can use z-index directly without explicitly setting position. The browser treats them as positioned for the purpose of stacking.

Modals should be direct children of <body> (or a top-level wrapper) to escape ancestor stacking contexts. The HTML <dialog> element handles this natively in the browser's top layer.

z-index controls front-to-back stacking of positioned elements. Stacking contexts isolate z-index competition. Anything that creates a stacking context on a parent can trap child z-index values. Use isolation: isolate to create explicit boundaries and CSS variables for a z-index scale.