CSS z-index Not Working: Stacking Contexts, Positioning, and Layer Fixes

Why is z-index Not Working?

z-index participates in stacking only within the element's stacking context. Diagnose the context creator, positioning, paint order, and clipping before increasing the number.

The z-index property controls the stacking order of elements, but it only works on positioned elements (position: relative, absolute, fixed, or sticky). The most common reason z-index doesn't work is that the element has position: static (the default).

Common Causes

Element has position: static (default) "" z-index has no effect
Parent element creates a new stacking context with lower z-index
opacity less than 1 creates a new stacking context
transform, filter, or will-change creates a new stacking context
Comparing z-index values across different stacking contexts

Quick Fix (TL;DR)

Immediate Fix: Z-index on static element

/* ❌ Problem "" z-index on static element */
.element {
  z-index: 999; /* Has NO effect! */
  /* position: static is the default */
}

/* ✅ Solution "" add position */
.element {
  position: relative; /* or absolute, fixed, sticky */
  z-index: 999; /* Now works! */
}

Common Scenarios & Solutions

Failure: Ignored! No position set

.tooltip {
  z-index: 1000; /* ❌ Ignored! No position set */
  background: black;
  color: white;
}

Z Index Not Working Correction 1

.tooltip {
  position: relative; /* ✅ Enable z-index */
  z-index: 1000;
  background: black;
  color: white;
}

Failure: Parent has z-index: 1 creates stacking context

/* Parent has z-index: 1 "" creates stacking context */
.parent {
  position: relative;
  z-index: 1; /* ❌ Child can never exceed this context! */
}
.child {
  position: absolute;
  z-index: 9999; /* Trapped inside parent's context */
}

Correction: Higher than competing elements

/* ✅ Increase parent z-index or remove it */
.parent {
  position: relative;
  z-index: 100; /* Higher than competing elements */
}
/* Or move the child outside the parent in HTML */

Failure: Opacity < 1 creates a new stacking context

/* ❌ opacity < 1 creates a new stacking context */
.container {
  opacity: 0.99; /* Creates stacking context! */
}
.modal {
  position: fixed;
  z-index: 9999; /* Trapped in container's context */
}

Correction: No stacking context

/* ✅ Move modal outside the opacity container in HTML */
/* Or use rgba() for transparency instead of opacity */
.container {
  background: rgba(0, 0, 0, 0.5); /* No stacking context! */
}

/* ✅ Properties that create stacking contexts:
   - opacity < 1
   - transform (any value)
   - filter (any value)
   - will-change: transform/opacity
   - isolation: isolate
*/

Correction: Top:0 right:0 bottom:0 left:0

/* ✅ Proper modal z-index layering */
.overlay {
  position: fixed;
  inset: 0; /* top:0 right:0 bottom:0 left:0 */
  background: rgba(0,0,0,0.5);
  z-index: 100;
}
.modal {
  position: fixed;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  z-index: 101; /* Higher than overlay */
  background: white;
}

Best Practices to Avoid This Error

Always add position when using z-index - relative, absolute, fixed, or sticky
Use a z-index scale - Define variables: --z-dropdown: 100, --z-modal: 200
Avoid unnecessary stacking contexts - Remove opacity, transform, filter when not needed
Use isolation: isolate - Explicitly create stacking contexts when needed
Keep modals at the body level - Use portals to render outside parent contexts
Use browser DevTools layers panel - Visualize stacking contexts
Use rgba() instead of opacity - For transparent backgrounds without stacking context

CSS z-index Not Working Stacking Contexts Positioning and Layer Fixes CSS fallback case

.lesson-box:empty::before {
  content: "CSS z-index Not Working Stacking Contexts Positioning and Layer Fixes: add visible content";
}

Before you move on

CSS z-index Not Working: Stacking Contexts, Positioning, and Layer Fixes Mastery Check

4 checks

Identify every ancestor that creates a stacking context before increasing z-index.
Compare layers only inside the same stacking context and move the element when the contexts are ordered incorrectly.
Inspect position, transform, opacity, isolation, containment, and computed z-index in developer tools.
Use a documented layer scale for content, menus, overlays, and modals instead of arbitrary large numbers.

CSS Questions Learners Ask

z-index only works on positioned elements. Add position: relative (or absolute/fixed/sticky) to the element. Without a position value, z-index is ignored.

A stacking context is an isolated layer in the z-axis. Elements inside a stacking context are stacked relative to each other, not to elements outside. A parent with z-index creates one.

transform creates a new stacking context. If a parent has transform, its children are stacked within that context and can't appear above elements outside it, regardless of z-index value.

Previous Next