Home / Snippets / Layout /

z-index token scale

Stop guessing with z-index: 9999. Define a small scale of tokens so dropdowns, modals, and toasts layer predictably across the app.

Token scale --z-dropdown 20 · --z-modal 50 · --z-toast 60

Sticky bar

z-index: var(--z-sticky) 30

Toast

z-index: var(--z-toast) 60

Widely Supported

layoutno-js

Quick implementation

:root {
  --z-base: 0;
  --z-dropdown: 20;
  --z-sticky: 30;
  --z-overlay: 40;
  --z-modal: 50;
  --z-toast: 60;
}

.toast { z-index: var(--z-toast); }
.modal { z-index: var(--z-modal); }
.menu  { z-index: var(--z-dropdown); }

Prompt this to your LLM

Includes role, constraints, two framework variants, and edge cases to handle.

You are a senior frontend engineer standardizing stacking order.

Goal: Define a small z-index token scale using CSS custom properties so common UI layers (dropdown, sticky header, overlay, modal, toast) have predictable ordering.

Technical constraints:
- Define tokens on :root with small integers (avoid 9999).
- Include a brief naming convention (z-base, z-dropdown, z-modal, z-toast).
- Demonstrate usage in a few component selectors.
- Mention that z-index only works inside a stacking context and requires position (relative/absolute/fixed/sticky) in most cases.

Framework variant (pick one):
A) Vanilla CSS tokens.
B) CSS-in-JS example that exports a zIndex map.

Edge cases to handle:
- Stacking contexts created by transform/filter/opacity/isolation.
- Portals: modals/toasts rendered at document root.
- Third-party widgets that ship with huge z-index values.

Return CSS + short guidance text.

Why this matters in 2026

As products grow, layering bugs become inevitable: dropdowns under sticky headers, modals under sidebars, toasts behind overlays. A token scale prevents “z-index inflation” and makes conflicts debuggable.

The logic

Tokens are shared contracts. When a dropdown always uses --z-dropdown and a modal always uses --z-modal, the ordering is enforced across teams and components. If you need a new layer, you add a token—not a random number.

Accessibility & performance

This is a layout/system concern, not a semantic one. The accessibility work still lives in focus management and ARIA for modals/menus. Performance-wise, tokens are cheap; the real gotchas are accidental stacking contexts created by transforms and filters.