Z-Index

Set the stack order for an element.

Widely available

This feature is well established and works across many devices and browser versions.

Chrome
Edge
Firefox
Safari

zi-0
z-index: 0;
zi-10
z-index: 10;
zi-20
z-index: 20;
zi-30
z-index: 30;
zi-40
z-index: 40;
zi-50
z-index: 50;
zi-60
z-index: 60;
zi-70
z-index: 70;
zi-80
z-index: 80;
zi-90
z-index: 90;
zi-9999
z-index: 9999;
zi-auto
z-index: auto;

Responsiveness

Use breakpoint prefixes to target different screen sizes. Styles apply from the breakpoint & up.

Target viewport sizes with breakpoint prefixes.

sm:zi-(value)
Small≥640px
md:zi-(value)
Medium≥768px
lg:zi-(value)
Large≥1024px
xxl:zi-(value)
Extra Large≥1536px

Hover State

Apply styles conditionally on hover using the h: prefix.

Add the h: prefix to apply styles only when the user hovers over the element.

Syntax:h:zi-(value)

Negative Values

Use negative variants to apply negative z-index values.

Use the -- syntax to apply negative numeric values.

Syntax:zi--(value)