Why z-index sometimes does nothing in CSS

z-index only sorts siblings inside the same stacking context, and lots of things create one.

.page { position: relative; z-index: 0; }

/* new stacking context: the modal below can never sit above it */
.hero {
  position: relative;
  z-index: 1;
  transform: translateZ(0);
}

.hero .badge { position: absolute; z-index: 9999; }

.modal {
  position: fixed;
  inset: 0;
  z-index: 100;
}

.faded { opacity: 0.99; }

How it works

1. A positioned element with a z-index starts its own context.
2. So do opacity below 1, transform, filter and will-change.
3. A child can never escape its parent's place in the order.

Keywords and builtins used here

• badge
• faded
• hero
• inset
• modal
• opacity
• page
• position
• transform
• translateZ

The run, in numbers

Lines

18

Characters to type

310

Tokens

70

Three-star pace

85 tpm

At the three-star pace of 85 tokens a minute, this run takes about 49 seconds.

Type this snippet

Step 4 of 7 in Positioning, step 20 of 24 in Flexbox & grid.

← Previous Next →