Z-Index

There are z-index tokens for different layout items. Only use the stacking tokens at the end of this list when layering items in a component or a small area within a layout.

List of design token names, values and metadata for

Name	Value
z-index-bottom Use descriptive `z-index` tokens for layout purposes.	-100 z-index.-100
z-index-base	0 z-index.0
z-index-above-content	1 z-index.1
z-index-toolbar	2 z-index.2
z-index-dropdown	50 z-index.50
z-index-sticky	100 z-index.100
z-index-fixed	200 z-index.200
z-index-off-canvas-backdrop	300 z-index.300
z-index-off-canvas	350 z-index.350
z-index-overlay-backdrop	400 z-index.400
z-index-overlay	450 z-index.450
z-index-tooltip	800 z-index.800
z-index-toast-notification	900 z-index.900
z-index-top	9999 z-index.9999
z-index-stacking-0 Use stacking-specific z-index tokens inside components to layer individual elements.	0 z-index.0
z-index-stacking-1	1 z-index.1
z-index-stacking-2	2 z-index.2
z-index-stacking-3	3 z-index.3