Fundamentals / z-index

Priority 1

Layers

Back to docs

Spectra keeps z-index values named and small. Components should use the layer tokens instead of random numbers.

Layer tokens

Token	Used for	Value
`--sp-z-base`	Base content	0
`--sp-z-sticky`	Sticky bars	10
`--sp-z-dropdown`	Menus / selects	20
`--sp-z-popover`	Tooltips / popovers	30
`--sp-z-drawer`	Drawers / panels	40
`--sp-z-modal`	Modal dialogs	50
`--sp-z-toast`	Toasts / notices	60
`--sp-z-overlay`	Global blocking overlays	70
`--sp-layer-panel`	Alias for panel/drawer layer	var(--sp-z-drawer)
`--sp-layer-modal`	Alias for modal layer	var(--sp-z-modal)
`--sp-layer-toast`	Alias for toast layer	var(--sp-z-toast)
`--sp-layer-overlay`	Alias for overlay layer	var(--sp-z-overlay)

Stack preview

base

sticky

drawer

modal

toast