CSS Z-Index Manager

How to use

1. 1Review the default layer scale, then rename, reorder, add, or remove layers so the order matches your project, lowest at the top.
2. 2Set the start value and the step between layers. A larger step, such as 100, leaves room to insert new layers later without renumbering.
3. 3Optionally set a custom property prefix and add a note to each layer; notes become comments in the generated CSS.
4. 4Switch the output between CSS variables, a Sass map, and a JS or TS object, then copy the code into your stylesheet or tokens file.
5. 5Open the stacking context section and toggle on the styles present on a misbehaving element to see whether it creates a new stacking context and why.
6. 6Apply the suggested fixes, for example isolation: isolate or rendering an overlay at the root. Everything runs in your browser with no upload.

About this tool

CSS Z-Index Manager does the two things developers actually search for when z-index gets confusing: it gives you an organized scale to replace magic numbers, and it explains why a z-index that should work is being ignored. The first half is a scale builder. Most projects accumulate z-index values like 1, 10, 100, 999, 9999, and 2147483647 scattered across files with no relationship to each other, and the moment a new layer needs to slot between two existing ones the whole thing gets bumped up by hand. Here you define your layers in order, from the document base up through dropdowns, sticky headers, fixed chrome, overlays, modals, popovers, toasts, and tooltips, and the tool assigns each one a numeric value derived from its position. You choose the starting value and the step between layers, so a step of 100 leaves room to insert a new layer at, say, 250 without touching anything else. Reordering a layer, renaming it, adding one, or removing one keeps every value consistent and gap-free because the numbers come from the order, not from a value you typed. The scale is emitted three ways: as CSS custom properties on :root that you reference with z-index: var(--z-modal), as a Sass map with a small accessor function, and as a typed JavaScript or TypeScript object, so it drops into whatever stack you use. A custom property prefix lets you namespace the variables, and each layer carries an optional note that becomes a comment in the CSS output, turning the file into living documentation of what sits on each layer. The second half is a stacking context diagnostic, and this is the part that fixes the classic z-index: 99999 still does not show on top bug. The cause is almost always a stacking context: a child element can never escape the stacking order of an ancestor that forms its own context, no matter how large the child's z-index is. To a sibling outside that ancestor, the whole subtree stacks as a single unit at the ancestor's level. The catch is that many ordinary CSS declarations create a stacking context without any obvious connection to layering. A positioned element with a z-index does it, which everyone expects, but so does opacity below 1, any transform other than none, a filter, a backdrop-filter, will-change naming a context-forming property, isolation: isolate, mix-blend-mode, clip-path, mask, perspective, contain, and a z-index on a flex or grid child even with no position. The diagnostic lists each of these as a toggle. Switch on the declarations present on your element and the tool tells you live whether it forms a stacking context and, for every active trigger, exactly why, so you can spot the parent with opacity: 0.99 or a transform animation that is quietly trapping your modal. It also copies the selected declarations as a CSS snippet and offers concrete fixes: reach for isolation: isolate when you want to contain children on purpose, render overlays at the document root so no ancestor can trap them, and watch parents using transform, filter, or fractional opacity. Everything is computed in your browser from local state. The layers you define, the values you pick, and the toggles you select are never uploaded, never logged, and never leave your device.

Free to use. Works in your browser. No signup, no login.