CSS z-index Not Working — Stacking Context Fix (2026) | Tutorials Logic

Why is z-index Not Working?

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 Symptoms:
Element appears behind another despite higher z-index • Modal behind overlay • Dropdown hidden behind content

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)

Quick Solution

/* ❌ 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

Scenario 1: z-index Without Position

Problem

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

Solution

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

Scenario 2: Parent Creates Stacking Context

Problem

/* 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 */
}

Solution

/* ✅ 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 */

Scenario 3: opacity Creates Stacking Context

Problem

/* ❌ 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 */
}

Solution

/* ✅ 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
*/

Scenario 4: Modal Behind Overlay

Solution

/* ✅ 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

Related Issues

Key Takeaways

z-index only works on positioned elements (position: relative/absolute/fixed/sticky)
A parent with z-index creates a stacking context that traps its children
opacity < 1, transform, filter, and will-change all create new stacking contexts
Use rgba() for transparent backgrounds instead of opacity to avoid stacking context issues
Define a z-index scale with CSS variables for consistent layering across your project
Use browser DevTools Layers panel to visualize stacking contexts