z-index

z-index sets a box’s stacking level within its stacking context. It applies to positioned boxes and also flex or grid items, even when those items are static. A larger number does not escape an ancestor’s stacking context.

Layer two overlapping grid items

Both items occupy one grid cell. They have no position declaration: z-index still works because they are grid items. The later blue note is behind the raised note.

<div class="layout">
  <div class="raised">Raised: z-index 2</div>
  <div class="behind">Behind: z-index 1</div>
</div>

.layout {
  display: grid;
  isolation: isolate;
  min-height: 120px;
}
.layout > * {
  grid-area: 1 / 1;
  padding: 1rem;
  align-self: start;
}
.raised {
  z-index: 2;
  background: #bfdbfe;
  margin-right: 3rem;
}
.behind {
  z-index: 1;
  background: #eff6ff;
  margin-top: 2rem;
}

See an ancestor limit a large child value

The child at 9999 stays inside its parent’s stacking context at 1. The sibling at 2 covers the overlap. Change the parent’s z-index to 3 to move that whole context above the sibling.

<div class="stage">
  <div class="group"><div class="child">Child: 9999</div></div>
  <div class="sibling">Sibling: 2</div>
</div>

.stage {
  position: relative;
  height: 150px;
  isolation: isolate;
}
.group {
  position: absolute;
  inset: 0 3rem 1rem 0;
  z-index: 1;
  background: #eff6ff;
}
.child {
  position: absolute;
  top: 1rem;
  left: 1rem;
  z-index: 9999;
  background: #bfdbfe;
  padding: 1rem;
}
.sibling {
  position: absolute;
  top: 3rem;
  left: 3rem;
  z-index: 2;
  padding: 1rem;
  background: #ddd6fe;
}

Values and stacking contexts

The initial value is auto and z-index is not inherited. Integers, including zero and negatives, set the stack level and establish a local stacking context for positioned boxes and flex/grid items. Auto is different from 0; other properties can still create a context even with auto.

Opacity below 1, transforms, isolation:isolate, and several containment/compositing features can create contexts. Fixed and sticky boxes create them too. Each context is treated as a unit in its parent’s stacking order, so a child’s value is compared only within that context.

Avoid fabricated controls

A high z-index does not implement a modal, dropdown, or tooltip’s behavior. Use dialog for a modal’s focus and dismissal behavior; modal dialogs enter the top layer, which ordinary z-index values cannot overtake.

Inspect context boundaries before increasing numbers. Negative values can place content behind backgrounds; test visible focus and click targets. Learn position, opacity, and transform.

Sources and browser support

MDN: z-index describes the syntax and links to the specification and compatibility data. Check individual values in that table when supporting older browsers.

Positioning details explain stacking-context boundaries.