z-index

z-index is a CSS property that sets the stack level of an element, determining which element appears on top when they overlap. Higher values are painted in front of lower ones. It only applies to elements that are positioned (not static) or that are flex or grid items.

Why it matters

Overlays such as modals, dropdowns, sticky headers and tooltips all compete for the top layer. The usual surprise is that z-index is not global. Elements belong to stacking contexts, and a child can never escape its parent's context, so z-index: 9999 may still lose to an element in another context.

Example

.header { position: sticky; top: 0; z-index: 10; }
.modal  { position: fixed; inset: 0; z-index: 100; }
.card   { position: relative; transform: translateZ(0); }

The transform on .card creates a new stacking context. Anything inside it is ordered relative to the card, not the whole page. Opacity below 1, filter, and isolation: isolate also create contexts.

Common mistakes

• Escalating values (999, 9999, 99999) instead of defining a small named scale, for example in CSS variables.
• Setting z-index on a non-positioned element and seeing no effect.
• Not realizing a parent with overflow or transform traps a dropdown beneath other content.

Related

• CSS
• Box model
• CSS specificity
• CSS variables

This page is general information written by our editorial team and updated when documentation changes. Servers and providers differ, so test changes safely first. See our editorial policy and disclaimer.