CSS Z-Index Generator: Fix Stacking Order Fast

Few CSS bugs are as confusing as a stacking bug. A dropdown menu opens, but it appears behind the page header. A modal dialog appears, but its dark backdrop covers it instead of sitting behind it. A tooltip flickers into view and then vanishes behind an image. In each case the elements are all on the page, correctly positioned, and simply in the wrong order from front to back. The property that controls that order is z-index, and it is easy to misuse, because its behaviour depends on more than the number you write. The CSS Z-Index Generator helps by turning a list of layers, in stacking order, into a spaced set of z-index values with matching custom properties, so the scale stays orderly instead of drifting into guesswork.

The basic rule is simple: among elements that can stack, a higher z-index paints in front of a lower one. The complications come from the details. Z-index only applies to positioned elements, meaning elements with a position other than the default static, and to flex and grid items in some cases. An element also creates a stacking context in certain situations, such as when it has a transform, an opacity below one, or its own z-index with positioning, and children inside a stacking context cannot escape it. That is why a dropdown with a huge z-index can still hide behind a header: if the dropdown lives inside a parent that forms a low stacking context, no value inside that parent can lift it above an element outside the parent. The number alone is not the whole story; the structure matters too.

How the tool works

You list your page layers in order, from back to front, choose a starting value and a gap, and the tool assigns each layer a value spaced by that gap. It also produces custom properties, one per layer, so your stylesheet can refer to names rather than bare numbers. Everything runs in your browser. The point of the gap is headroom: if you start at 10 with a gap of 10, your layers get 10, 20, 30 and so on, and when you later need a layer between two existing ones, there is room to insert it without renumbering everything. A scale with no gaps, 1, 2, 3, is brittle, because the first new layer forces a renumber or an awkward fractional-feeling hack.

Custom properties are the other half of the discipline. Writing --z-header: 10 in one place and using var(--z-header) wherever the header's layer is needed means the value lives in a single spot. When the scale changes, you change it once. When a teammate reads the stylesheet, they see a name that explains the layer instead of a bare number that could mean anything. The generator produces both the values and the variable declarations, so the naming step is not left to chance.

A worked example

Suppose a page has three layers: a header at the back, a dropdown in the middle, and a modal at the front. Start the scale at 10 with a gap of 10. The header gets 10, the dropdown gets 20, and the modal gets 30. As custom properties, that is --z-header: 10, --z-dropdown: 20, and --z-modal: 30. The arithmetic is deliberately plain: each layer is the previous layer plus the gap, so the order is obvious and the values are easy to check.

Now suppose a tooltip needs to sit between the dropdown and the modal. With a gap of 10, there is room: the tooltip can take 25 without disturbing any existing layer. If the original scale had been 1, 2, 3, there would be no whole number between 2 and 3, and the team would face a renumber or an ugly workaround. That is the practical payoff of spacing. It is not about the numbers looking tidy; it is about leaving room for the layers you have not designed yet. The same logic applies in the other direction: if a layer needs to sit below everything else, a starting value above zero leaves room beneath the scale as well.

Common mistakes

The most common mistake is escalating z-index values without understanding stacking contexts. When a dropdown hides behind a header, the instinct is to raise its z-index to a very large number. If the real problem is a parent stacking context, the large number changes nothing, and the codebase accumulates enormous values that still do not fix the bug. The correct response is to inspect the ancestors of both elements and find which one forms the context that traps the dropdown. A second mistake is using z-index on elements that are not positioned, where it simply has no effect, and then wondering why nothing changed.

A third mistake is scattering bare numbers through a stylesheet with no scale. One file uses 999 for a modal, another uses 1000 for a tooltip, and a third uses 9999 for a banner, and the result is an arms race where every new layer must outbid the last. A fourth mistake is forgetting that properties such as transform and opacity create stacking contexts as a side effect. An animation that adds a transform to a container can suddenly change the stacking of everything inside it, producing a bug that appears only when the animation runs. When a stacking bug appears after an unrelated change, check what that change did to stacking contexts before touching any z-index value.

Honest limitations

A generator assigns values; it does not inspect your page or diagnose your stacking contexts. It cannot see your HTML structure, your existing stylesheet, or the transforms and opacities that may be creating contexts in your layout. The values it produces are a clean starting scale, not a prescription for a specific page, and you still need to apply them to positioned elements and verify the result in a browser. If your page's problem is a stacking context rather than a value, no generator can fix it; the structure has to change. Use the generator to keep the scale sane, and use your browser's inspection tools to find the context when a layer still refuses to move.

Closing

Stacking bugs feel mysterious until you separate the two questions: what is the order of the layers, and what is trapping them. A spaced scale with named variables answers the first question cleanly, and leaves you free to investigate the second when a value alone does not fix it. List the layers, space them, name them, and check the result. For neighbouring jobs, the HTML Formatter and Beautifier and CSS Formatter and Beautifier keep the surrounding code readable, while How to Resize and Crop Images for Different Layouts covers another layout problem where the visual result differs from what the code seems to say.