z-index not working

Your z-index isn’t doing anything because the element doesn’t have a positioning context.

Fix 1: Add position

/* ❌ z-index only works with positioned elements */
.modal {
  z-index: 999;
}

/* ✅ Add position */
.modal {
  position: relative;  /* or absolute, fixed, sticky */
  z-index: 999;
}

Fix 2: Stacking context issue

A parent with a lower z-index creates a stacking context that limits children:

/* Parent creates stacking context with z-index: 1 */
.parent {
  position: relative;
  z-index: 1;
}

/* Child can't escape parent's stacking context */
.child {
  position: relative;
  z-index: 9999;  /* Still behind elements with z-index: 2 outside parent */
}

Fix: Remove z-index from the parent, or restructure your HTML.

Fix 3: Other properties that create stacking contexts

These also create stacking contexts (even without z-index):

• opacity less than 1
• transform (any value)
• filter (any value)
• will-change

Related resources

• CSS Flexbox & Grid cheat sheet
• CSS complete guide