Z-Index

Layer stacking system: named tokens for every UI surface from base to tooltip.

Layer stack — hover a layer to inspect

Below --z-below -1

Base --z-base 0

Raised --z-raised 10

Sticky --z-sticky 1020

Fixed --z-fixed 1030

Toast --z-toast 1100

Token reference

Token	Value	When to use
--z-below	-1	Decorative backgrounds; pseudo-element underlay behind a card or hero.
--z-base	0	Default document flow. Most content lives here.
--z-raised	10	Cards with hover lift, inline badges, floating labels.
--z-dropdown	1000	Dropdown menus, combobox popups, date pickers.
--z-sticky	1020	Sticky table headers, anchored section nav.
--z-fixed	1030	Fixed-position top nav / bottom toolbar.
--z-modal-bg	1040	Semi-transparent backdrop behind modal dialogs.
--z-modal	1050	Modal dialogs, alert dialogs, confirmation sheets.
--z-popover	1060	Popovers, floating panels — sit above modals.
--z-toast	1100	Notification toasts, snackbars — always visible.
--z-tooltip	1200	Tooltips — highest layer, never obscured.

Live demo — toggle layers

Click the buttons to add UI surfaces and observe how each layer correctly sits above or below the others according to its token value.

Stacking context preview

Sticky Header

--z-base
0

Toast notification — --z-toast · 1100

Usage patterns

/* Always reference the token, never hardcode numeric values */ .my-dropdown { z-index: var(--z-dropdown); } .my-modal { z-index: var(--z-modal); } .my-tooltip { z-index: var(--z-tooltip); } /* Scoped stacking context — resets the layer ladder inside a component. Use this pattern for self-contained widgets (sliders, carousels, editors) to avoid leaking their internal z-index onto the global stack. */ .my-widget { position: relative; isolation: isolate; /* creates a new stacking context */ } .my-widget__overlay { z-index: 1; /* relative to .my-widget, not the page */ } /* Tailwind: override a token-driven layer with an arbitrary value if needed */ <div class="z-[var(--z-popover)]">...</div>

Common pitfalls

transform creates a context

Applying transform, filter, or will-change to a parent implicitly creates a new stacking context, capping its children's z-index at the parent's level regardless of token value.

opacity < 1 creates a context

An element with opacity less than 1 forms its own stacking context. A semi-transparent modal backdrop can inadvertently trap a tooltip inside it.

isolation: isolate is intentional

Use isolation: isolate on self-contained components to prevent their internal layers from colliding with the global z-index ladder.

Never hardcode numeric z-values

Magic numbers like z-index: 9999 break the contract. Always use the token. If a token is missing, add it to token.css with a comment, then reference it.

Other Components in Foundation