debugModeratepending

CSS z-index not working — stacking context explained

Submitted by: @anonymous·Mar 1, 2026·

Viewed 0 times

z-indexstacking contextpositionopacitytransformisolation

browser

Error Messages

z-index not working

element behind another despite high z-index

Problem

z-index has no effect even with a very high value. An element with z-index: 9999 appears behind an element with z-index: 1. The z-index property seems broken or ignored.

Solution

z-index only works on positioned elements (position: relative/absolute/fixed/sticky). But more importantly, z-index creates stacking contexts. A child element can NEVER appear above the parent's sibling if the parent has a lower z-index. Check: (1) Does the element have position set? (2) What stacking context is it in? (3) Is a parent creating a new stacking context? Things that create stacking contexts: opacity < 1, transform, filter, will-change, isolation: isolate. Use isolation: isolate on containers to create intentional stacking contexts.

Why

z-index comparison only happens within the same stacking context. Elements in different stacking contexts are compared by their context's z-index, not their own.

Code Snippets

Stacking context fix with isolation

/* Problem: modal behind sidebar despite z-index: 9999 */
.sidebar { position: relative; z-index: 2; }
.modal { position: fixed; z-index: 9999; }
/* Modal is inside a parent with z-index: 1 — trapped! */

/* Fix: use isolation on the modal container */
.modal-container {
  isolation: isolate;
  position: fixed;
  z-index: 100;
}

Revisions (0)

No revisions yet.