Skip to content
Layout

z-index

Controls the paint order of overlapping elements. It participates in stacking contexts rather than creating one global page-wide number line.

978 effects in the catalog use this property.

Syntax

z-index: <integer> | auto;

Watch out

A descendant with `z-index: 9999` can still sit below an outside `z-index: 1` when an ancestor created a stacking context through `opacity`, `transform`, or another trigger.

Effects using z-index

These are working effects from the catalog. Open a tile to inspect the full source.