Z-index Stacking Visualizer
Add layers, sort them by paint order and see which properties create a stacking context.
Paint order (back to front)
Overlap preview
The preview positions every layer absolutely so the paint order stays visible, even for layers marked as static.
What creates a new stacking context
- A positioned element (position other than static) with a z-index other than auto.
- An element with opacity lower than 1.
- An element with a transform, filter, backdrop-filter or perspective other than none.
- An element with isolation: isolate, mix-blend-mode other than normal, or will-change naming one of those properties.
- A flex or grid item with a z-index other than auto, and the root element of the document.
How to use it
- Name a layer, set its z-index and pick its position value.
- Optionally lower the opacity, tick transform, or mark the layer as creating its own stacking context.
- Click Add layer and watch the list reorder itself into the paint order the browser would use.
- Compare the overlapping preview squares, where a dashed outline marks a layer that creates a stacking context.
- Remove single layers or clear the set and rebuild it while you reason about a real bug.
Common use cases
- Debugging an invisible overlay - see immediately whether a static layer can respond to z-index at all.
- Planning a modal stack - place base content, sticky headers and dialogs in one ordered list.
- Teaching stacking rules - show that z-index has no effect on an element with position static.
- Checking side effects - mark a layer that uses opacity below 1 and see it become a stacking context.
Why it stays private
Layers live in page memory only. There is no upload, no account and no network request, so your layer names and values stay in the browser tab.
FAQ
Q: Why is a static layer listed below a positioned layer with z-index 0? A: The CSS painting algorithm draws in-flow non-positioned content before positioned descendants with z-index auto or 0. Adding z-index to a static element changes nothing, which is the most common reason an overlay refuses to appear.
Q: Does a lower z-index always mean further back? A: Only inside the same stacking context. Two elements in different stacking contexts are compared through their parents, so a child with z-index 999 can still sit behind a sibling of its parent that has z-index 2.
Q: What does the stacking context checkbox change? A: It marks the layer as one that traps its descendants, so no child of it can be compared against elements outside it. The visualiser draws a dashed outline so you can see the boundary while you reorder the list.
Your data stays on this device
Z-index Stacking Visualizer runs 100% locally. Everything you paste or drop is processed by your own browser and never transmitted. Nothing is stored on our servers — close the tab and it is gone.
Nothing you type is sent to a server, logged, or used for analytics. The page works even with your network disconnected after first load.