Z-index

Determine an item's position in the stacking order

Properties

Utility class	Description
.z-bottom	Place an element beneath all other content.
.z-auto	No numeric stacking level (default: base).
.z-0	The base stacking level.
.z-100	Raises the element above base content.
.z-200	Used for overlays and mid-level components.
.z-300	Commonly used for modals and dialogs.
.z-400	Higher than common overlays.
.z-500	Stacking for very high-priority UI.
.z-top	Place an element above all other content.

Visual demonstration

Higher z-index values render above lower values.

Token

Value

'auto' auto

'top' 99999

500 500

400 400

300 300

200 200

100 100

0 0

'bottom' -100

Utility classes

Utility classes may be included in your HTML or applied using Utility classes in your Sass.

Utility	Example	Code
.z-value	.z-500	class=("z-500")

Use single-quoted strings in Utility classes.
Do not quote numbers or px values. With the exception of half (05), values like '105', and '205' should be treated as strings.
String tokens for half values (like 05) and negative values (like neg-1) may also be written with their unquoted number token equivalent: 0.5, 1.5, 2.5, -1, -1.5, etc.
If multiple utilities share the same prefix (ex: .text- or .flex-) or a single utility accepts multiple kinds of values (ex: .border accepts both border weight and border color), their shared mixin can accept multiple comma-separated values:
- u-text('primary-darkest', 'no-underline', 'bold')
- u-border-top(2px, 'accent-warm')
Output any utility mixin as !important by appending !important to the mixin’s argument list:

u-bg('red-warm-50v', !important)

Utility variants

More information about utility variants can be viewed on the utility variants page. Responsive and state variants are listed as true when they are available for use.

Responsive variants

You can apply different styles at differentresponsive breakpoints using responsive utilities. Use a breakpoint prefix separated with a : to target a utility at a responsive breakpoint and higher (eg. .desktop:border-05).

Utility variable	Responsive
$font-style-settings	false

State variants

You can apply different styles for different state variants using state utilities. Use a state prefix separated with a : to target a utility for a specific state. (eg. .hover:shadow-2).

Utility variable	Active	Focus	Hover	Visited
$font-style-settings	false	false	false	false