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).
/* ❌ 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! */
}.tooltip {
z-index: 1000; /* ❌ Ignored! No position set */
background: black;
color: white;
}.tooltip {
position: relative; /* ✅ Enable z-index */
z-index: 1000;
background: black;
color: white;
}/* 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 */
}/* ✅ 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 *//* ❌ 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 */
}/* ✅ 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
*//* ✅ 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;
}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.
The maximum z-index is 2147483647 (2^31 - 1). However, using very high values is a code smell. Use a defined scale like 10, 20, 30 or CSS variables for maintainable layering.
Ensure the modal has position: fixed and a high z-index. Check if any parent has opacity, transform, or filter that creates a stacking context. Move the modal HTML to the body level using a portal.
Explore 500+ free tutorials across 20+ languages and frameworks.