Stacking Contexts
A stacking context is an element that establishes its own z-index scope. Children of a stacking context cannot appear behind or in front of elements outside their context.
CSS
Advanced
6 min read
Stacking Contexts in CSS
Example
/* These properties create a new stacking context: */
/* position + z-index (non-auto) */
/* opacity < 1 */
/* transform, filter, clip-path */
/* isolation: isolate */
.isolated {
isolation: isolate; /* Creates stacking context without side effects */
}
/* Use isolation: isolate to prevent z-index bleed */
.card { isolation: isolate; }
.card .overlay { z-index: 1; } /* Relative to .card, not page */ Pro Tip
Use isolation: isolate when a component's internal z-indexes are bleeding into the page — it creates a contained stacking scope.