Z-index

Low-level z-index utilities for controlling stack order of positioned elements.

@layer utilities

Example

z-index utilities set the CSS z-index property. A position value other than static is required for z-index to take effect — applied via position utilities or custom styles.

These are considered low-level utilities because they cover values -1 through 3 — the range used to manage overlapping layout elements. Overlay components like modals and tooltips use higher z-index values defined separately.

z-3

z-2

z-1

z-0

z-n1

<div class="z-3 position-absolute p-4xlarge rounded"><span>z-3</span></div>
<div class="z-2 position-absolute p-4xlarge rounded"><span>z-2</span></div>
<div class="z-1 position-absolute p-4xlarge rounded"><span>z-1</span></div>
<div class="z-0 position-absolute p-4xlarge rounded"><span>z-0</span></div>
<div class="z-n1 position-absolute p-4xlarge rounded"><span>z-n1</span></div>

Overlays

Chassis overlay components — dropdowns, modals, drawers, popovers, toasts, and tooltips — each have their own z-index values. These are documented on the z-index layout page.

Component approach

Some components use low-level z-index utilities to manage stacking within repeating element groups, such as button groups. See the z-index extend page for details.

CSS

Z-index utilities are generated from Sass maps via the utilities API.

Reference

The table lists all z-index utilities and their CSS properties.

Class	Properties
`.z-n1`	`z-index: -1;`
`.z-0`	`z-index: 0;`
`.z-1`	`z-index: 1;`
`.z-2`	`z-index: 2;`
`.z-3`	`z-index: 3;`
`.z-4`	`z-index: 4;`
`.z-5`	`z-index: 5;`

Sass maps

Z-index utilities are generated from Sass maps in scss/config/_defaults.scss.

$zindex-levels: (
  n1: -1,
  0: 0,
  1: 1,
  2: 2,
  3: 3,
  4: 4,
  5: 5
);

Utilities API

Z-index utilities are declared in scss/utilities/_index.scss using the utilities API.

"z-index": (
  property: z-index,
  class: z,
  values: $zindex-levels,
),