Design tokens

Z-index

Z-index tokens determine an item’s position in the stacking order.

Z-index tokens

Token
Value
'auto' auto
'top' 99999
500 500
400 400
300 300
200 200
100 400
0 0
'bottom' -100

Using z-index tokens

Your context and coding style determine how you access USWDS z-index tokens in code.

Context Usage Example
function z-index(z-index)
z(z-index) 		z-index: z-index('bottom')
z-index: z('bottom')
mixin u-z(z-index) @include u-z('bottom')
setting z-index $theme-subnav-z-index: 'top'
utility .z-z-index .z-top