Basic Usage

/* z-index only works on positioned elements */
.tooltip {
  position: absolute;  /* or relative, fixed, sticky */
  z-index: 100;
}

/* Higher number = appears on top */
.modal { z-index: 9000; }
.modal-overlay { z-index: 8999; }
.nav { z-index: 1000; }
.tooltip { z-index: 500; }

Stacking Contexts

A stacking context is an isolated layer where z-index values only compete with each other. Elements outside the context can't be z-index-interleaved with elements inside it.

A new stacking context is created by:

Why z-index Isn't Working

/* Problem: parent has opacity < 1 creating isolated context */
.parent {
  opacity: 0.99; /* creates stacking context! */
}
.child {
  position: absolute;
  z-index: 9999; /* only beats siblings, not elements outside .parent */
}

/* Solution: use isolation: isolate explicitly when you need it,
   and avoid accidental context creation */

/* Force isolation deliberately */
.component {
  isolation: isolate; /* explicit stacking context */
}

/* Check for accidental contexts */
/* Common culprits: transform, filter, opacity < 1, will-change */

Best Practices

/* Use a z-index scale with CSS variables */
:root {
  --z-base: 1;
  --z-dropdown: 100;
  --z-sticky: 200;
  --z-modal-overlay: 300;
  --z-modal: 400;
  --z-toast: 500;
  --z-tooltip: 600;
}

.dropdown { z-index: var(--z-dropdown); }
.modal { z-index: var(--z-modal); }
← PreviouspositionNext →overflow