What creates a new stacking context in CSS?

A stacking context is created by: position: relative/absolute/fixed/sticky with a z-index value other than auto, opacity less than 1, transform with any value other than none, filter, perspective, clip-path, isolation: isolate, will-change: transform/opacity, and flex/grid children with z-index set. The root element (html) also creates a stacking context.

What z-index values should I use in my project?

Use a z-index scale with defined tiers: 1 for elevated elements, 10 for dropdowns, 100 for sticky headers, 1000 for modals/overlays, 10000 for toasts/notifications. Define these as CSS variables or design tokens. Never use arbitrary values like 9999 — they lead to z-index wars where numbers keep escalating.

CSS z-index and Stacking Context - Complete Guide

Q: Why does z-index 9999 not work?

z-index only works on positioned elements (position: relative, absolute, fixed, or sticky). If your element has position: static (the default), z-index is ignored. Even with positioning, z-index only competes within the same stacking context. If a parent element creates a stacking context with a low z-index, no child can escape it — z-index: 9999 on the child still stays below a sibling of the parent with z-index: 2.

How z-index Works

z-index controls the stacking order of elements that overlap. Higher values appear on top. But there are two critical rules most people miss:

z-index only works on positioned elements — the element must have position: relative, absolute, fixed, or sticky. On position: static (the default), z-index is completely ignored.
z-index is scoped to stacking contexts — elements can only compete with siblings in the same stacking context. A child can never appear above or below elements outside its parent’s stacking context.

Basic Example

.behind {
  position: relative;
  z-index: 1;
}
.in-front {
  position: relative;
  z-index: 2;
}
      

z-index: 1

z-index: 2

z-index: 3

Stacking Contexts Explained

A stacking context is like a z-index scope. Elements inside a stacking context are layered relative to each other, but the entire context is treated as a single unit in the parent’s stacking order.

/* Parent A creates a stacking context with z-index: 1 */
.parent-a { position: relative; z-index: 1; }
.child-a  { position: relative; z-index: 999; }  /* high, but trapped inside parent-a */

/* Parent B has a higher stacking context */
.parent-b { position: relative; z-index: 2; }
.child-b  { position: relative; z-index: 1; }    /* appears ABOVE child-a! */
      

In this example, .child-a has z-index 999 but still appears below .child-b (z-index 1). Why? Because .parent-a (z-index 1) is below .parent-b (z-index 2). The child cannot escape its parent’s stacking context.

What Creates a Stacking Context

Many CSS properties create new stacking contexts (not just z-index):

position: relative/absolute/fixed/sticky with z-index other than auto
opacity less than 1
transform with any value other than none
filter, backdrop-filter
perspective
clip-path
isolation: isolate
will-change: transform or will-change: opacity
Flex/grid children with z-index set (even without explicit positioning)
contain: layout or contain: paint

This is why adding opacity: 0.99 or transform: translateZ(0) can “fix” z-index issues — they create a new stacking context.

z-index Scale for Your Project

Define a scale and stick to it. This prevents z-index wars where numbers keep escalating to 99999:

:root {
  --z-base: 0;
  --z-elevated: 1;       /* cards, slight lifts */
  --z-dropdown: 10;      /* dropdowns, popovers */
  --z-sticky: 100;       /* sticky headers */
  --z-overlay: 1000;     /* modals, drawers */
  --z-toast: 10000;      /* toasts, notifications (always on top) */
}

.modal     { z-index: var(--z-overlay); }
.dropdown  { z-index: var(--z-dropdown); }
.toast     { z-index: var(--z-toast); }
      

Layer	z-index	Examples
Base	0	Page content
Elevated	1	Cards, raised elements
Dropdown	10	Menus, popovers, tooltips
Sticky	100	Fixed headers, sticky sidebars
Overlay	1000	Modals, drawers, lightboxes
Toast	10000	Notifications, error banners

isolation: isolate

Creates a stacking context without any visual side effects. Use it to scope z-index within a component:

.component {
  isolation: isolate;   /* creates stacking context */
}
.component .layer-1 { position: relative; z-index: 1; }
.component .layer-2 { position: relative; z-index: 2; }
/* These z-index values cannot leak outside .component */
      

This is the cleanest way to create a stacking context. No position, no opacity hacks.

Debugging z-index

Open DevTools, select the element, check if position is set
Walk up the DOM tree — find which ancestors create stacking contexts
Chrome DevTools: in the Layers panel, you can see all stacking contexts visually
If an element “won’t go above” something, its parent’s stacking context is likely too low

Frequently Asked Questions

Why does z-index 9999 not work?

Two common reasons: (1) The element has position: static, which ignores z-index. Add position: relative. (2) The element is inside a stacking context with a lower z-index than the element you are trying to cover. No child z-index can escape its parent’s stacking context.

What creates a new stacking context?

Many things: positioned elements with z-index, opacity < 1, transform, filter, clip-path, isolation: isolate, will-change, and flex/grid children with z-index. This is why adding transform: translateZ(0) can fix z-index issues.

What z-index values should I use?

Define a scale: 1 (elevated), 10 (dropdowns), 100 (sticky), 1000 (modals), 10000 (toasts). Use CSS variables. Never use arbitrary values like 9999 — they lead to escalation wars.

Related Tools

CSS Position Guide CSS Overflow Guide CSS Flexbox Reference Flexbox Generator