Design a Z-Index Layering System
Layout & Responsive · components, modals, design systems
Updated 2026-07-28
- Name your layers before you number them. Every interface has the same handful, and once they are named the arguments about which sits on top mostly disappear.
- Define the stack from back to front:
- Page content.
- Sticky headers and rails.
- Dropdowns, menus, and popovers.
- Drawers and side panels.
- Modal dialogs and their scrim.
- Toasts and notifications.
- Tooltips, which sit above everything because they explain everything.
- Leave gaps between the values so a new layer can be inserted without renumbering the system.
- Ban arbitrary numbers in feature code. A single high value written to win one argument is how a product ends up with a tooltip hidden behind a footer.
- Remember that stacking contexts are created by more than layering. Transforms, filters, and opacity all trap children inside their parent no matter how high their own value is.
- Decide what happens when two layers of the same kind overlap. A menu opened from inside a modal, or a toast fired while a drawer is open, needs a defined answer.
- Render floating elements outside their clipping ancestors. A tooltip inside a scrolling panel will be cut off, which is the single most common layering bug.
- Keep the scrim tied to the layer it belongs to, so dismissing one layer never leaves an invisible overlay swallowing clicks.
A layering system is cheap to define once and expensive to reverse-engineer from a hundred conflicting values.
Related guides
UX Handbook