CSS isolation: Prevent z-index Overflow
Prevent z-index from escaping containers
Child elements with z-index normally overflow and overlap elements outside their container, like fixed headers or floating sidebars. The isolation property creates a new stacking context, keeping z-index values contained within the element and its descendants.
/* Without isolation, z-index escapes the container */.card-container { position: relative; z-index: 1; /* Still doesn't fully contain child z-index values */}.card { z-index: 100; /* Can still overlap fixed/floating elements outside */}/* Or: restructure HTML to move overlapping content *//* Or: manage z-index globally across entire page (brittle, scales poorly) */.card-container { isolation: isolate;}.card { z-index: 100;}/* z-index contained within .card-container */Browser Support
This feature is well established and works across many devices and browser versions. It has been available across browsers since 2015.
Safe to use without fallbacks.
Isolate z-index locally
Z-index values stay contained within the element. Child elements can't leak out and overlap siblings or fixed content.
Simpler stacking logic
No need to calculate z-index globally across your whole page. Each component manages its own stacking independently.
Just one CSS property
No JavaScript, no extra markup. One line of CSS to fix z-index overflow problems.
How it works
In CSS, a child element with z-index can escape its container and overlap elements outside it, including fixed or floating elements. This happens because z-index only stacks relative to the parent's stacking context.
isolation: isolate forces the element to create a new stacking context. Now any z-index values on its children are contained within that element and can't reach outside to overlap siblings. You can use z-index: 100 inside .card-container and z-index: 200 in the next component without worrying about interference.
This is especially useful for component libraries and reusable UI. Each card, modal, dropdown, or dialog can manage its own z-index freely without coordinating globally.