What z-index values should I use?

A common scale is 100 for sticky headers, 200 for dropdowns, 300 for overlays, 400 for modals, and 500 for tooltips. Using multiples of 100 leaves room to insert new layers without renumbering.

Why does a higher z-index still appear behind another element?

Stacking only works within the same stacking context. If a parent has opacity, transform, filter, or will-change applied, it creates a new context that limits child z-index values. This tool manages values within one context.

What is the maximum z-index value?

The CSS spec allows values up to 2,147,483,647 (32-bit signed integer max). In practice, browsers cap rendering around 2,147,483,647 and any value beyond is treated as the maximum.

Does z-index work on all elements?

No. Z-index only applies to positioned elements (position: relative, absolute, fixed, sticky) and flex/grid children. Static elements ignore z-index entirely.

Can I save my layer list?

Yes — your layers are saved automatically to localStorage and restored when you revisit the page.

CSS Z-Index Organizer

Add named UI layers with z-index values, detect conflicts, and visualize the stacking order.

Add a Layer

Layers

0 layers

No layers yet — add one above.

Export CSS

/* add layers to generate export */

Stacking Order

highest z-index on top

Add layers on the left to see the stacking chart.

Quick Presets

Load a common stacking scale to get started:

Copied!

Summary

The CSS Z-Index Organizer helps front-end developers manage stacking contexts without guesswork. Add named layers — such as dropdown, modal, or tooltip — assign each a z-index value, and immediately see conflicts highlighted in red. Export a ready-to-paste CSS custom-property block or a Sass variable map to keep your entire project consistent.

How it works

Click "Add Layer" and type a name for the UI element (e.g. "modal" or "tooltip").
Enter the desired z-index value for that layer.
The stacking chart updates instantly, ordered from lowest to highest.
Duplicate z-index values are highlighted so you can spot conflicts immediately.
Drag layers in the list to reorder and auto-assign evenly-spaced values.
Click "Export CSS" to copy a ready-to-use CSS custom-property block.

Use cases

Audit an existing codebase to find overlapping z-index values.
Plan a new component library with a defined stacking scale.
Quickly resolve modal-behind-header conflicts during development.
Share a visual z-index map with teammates for design handoff.
Generate a CSS variables block for a design token system.
Teach junior developers how CSS stacking contexts work.

Frequently Asked Questions

Last updated: 2026-06-19 · Reviewed by Nham Vu