CSS Stacking Context & z-index Visualizer
Ever assigned z-index: 9999 only to watch your popup stubbornly hide behind a neighboring card? That is a Stacking Context trap. Switch to the 3D isometric view and inspect the layer hierarchy visually.
/* Valideyn yeni Stacking Context yaradır */
.card-a {
position: relative;
z-index: 1;
isolation: isolate; /* və ya opacity: 0.99, transform */
}
/* Bu element digər kontekstləri aşa bilmir */
.child-modal {
position: absolute;
z-index: 9999; /* Valideynin z-index: 1 səviyyəsində ilişib qalır */
}How to use it
- Select a preset scenario: 'Trapped Modal (z:9999)', 'Dropdown Under Next Card', or 'isolation: isolate Fix'.
- Toggle '3D Isometric Layers' to lift elements into space along the Z-axis.
- Switch parent stacking context triggers (opacity < 1, transform, filter, isolation) and see how child z-index is contained.
- Read the live diagnostics warning explaining which rule formed the context and copy clean CSS code.
How it works
What is a Stacking Context?
A stacking context is a three-dimensional conceptualization of HTML elements along an imaginary z-axis relative to the user. When an element forms a new stacking context, all of its child elements are confined to that context: no child z-index, however huge, can surpass the parent's standing relative to outer sibling contexts.
What triggers a new Stacking Context?
Beyond position with a numeric z-index, modern CSS creates contexts with: opacity < 1, transform != none, filter != none, clip-path, mix-blend-mode, contain: paint, and explicit isolation: isolate.
/* A subtle 0.99 opacity or zero-transform turns the element into a self-contained stacking jail! */
.parent {
opacity: 0.99; /* New Stacking Context created! */
}isolation: isolate — The Modern Solution
Historically developers hacked stacking contexts using transform: translateZ(0) or z-index: 0. The standard isolation: isolate property cleanly establishes a new stacking context without visual or layout side effects, encapsulating inner component z-indices safely.
.card {
isolation: isolate; /* Safe boundary: internal badges won't leak or clash */
}FAQ
Why does z-index have no effect on an element?
By default, position: static ignores z-index. Set position: relative, absolute, fixed, or sticky for z-index to take effect (unless the element is a direct child of a Flexbox or Grid container).
Why do React libraries render Modals with Portals?
Portals render modal dialogs and dropdowns directly into document.body to bypass nested ancestor stacking contexts created by transforms, filters, or card wrappers.
Can I inspect stacking contexts in DevTools?
Yes! Open Chrome or Edge DevTools, click the three dots menu → More tools → 'Layers' to explore an interactive 3D scene of all composited render layers.
