css/z-index-scale

Why

Ad hoc numbers escalate: a dropdown gets 100, a modal 999, a toast 9999, and the next fix needs 99999. Nobody can tell which layer should win, and a higher number does not even help when the element sits in a different stacking context.

Fix

Define the layers once, in order, and use the names: --z-dropdown: 1000; --z-modal: 1100; --z-toast: 1200; (or a Sass map). Inside a component keep small local values (below 10) and create a stacking context with isolation: isolate instead of raising the number. When the project already has a scale, the fix names it.

Examples

/* bad */
.modal { z-index: 9999; }
/* good */
:root { --z-dropdown: 1000; --z-modal: 1100; --z-toast: 1200; }
.modal { z-index: var(--z-modal); }

Sources

• MDN, z-index
• MDN, Stacking context
• MDN, Using CSS custom properties (variables)

Read it in the terminal

npx github:dawidolko/frontend-skills explain css/z-index-scale