Using CSS isolation: isolate for z-index Control
Learn how the CSS isolation property creates stacking contexts without side effects, providing clean z-index scoping for components.
Detailed Explanation
The isolation Property
The isolation property is the cleanest way to create a new stacking context without any visual side effects. Unlike opacity: 0.99 or transform: translateZ(0), isolation: isolate does exactly one thing: it creates a stacking context.
Syntax
.component {
isolation: isolate;
}
Why Use isolation?
When building component libraries, you want each component's internal z-index values to be scoped and not leak out. Without isolation, a tooltip inside Component A might conflict with a dropdown inside Component B:
/* Without isolation — z-index leaks across components */
.component-a .tooltip { z-index: 100; }
.component-b .dropdown { z-index: 50; }
/* tooltip appears above dropdown even though they're in different components */
/* With isolation — each component is self-contained */
.component-a {
isolation: isolate;
}
.component-b {
isolation: isolate;
}
.component-a .tooltip { z-index: 100; } /* scoped to component-a */
.component-b .dropdown { z-index: 50; } /* scoped to component-b */
Recommended z-index Scale with isolation
:root {
--z-base: 0;
--z-raised: 1;
--z-dropdown: 10;
--z-sticky: 20;
--z-overlay: 30;
--z-modal: 40;
--z-toast: 50;
--z-tooltip: 60;
}
/* Each component root gets isolation */
.card { isolation: isolate; }
.sidebar { isolation: isolate; }
.header { isolation: isolate; }
Browser Support
isolation: isolate is supported in all modern browsers including Chrome, Firefox, Safari, and Edge. It has no effect in IE11, but IE11 does not support many stacking context features anyway.
Use Case
When building a design system or component library where each component needs its own independent z-index scope to prevent layers from interfering across component boundaries.