Z-index

Use z-index utility classes to control the index of your elements in the z dimension. When two elements overlap each other, z-index establishes what element overlaps the other. Usually elements with larger z-index overlap elements with smaller ones.

Supported values #

Class name	z-index value	Used in
`-z--0`	0	Initial value
`-z--1`	1	Prominent elements (E.g. focused buttons)
`-z--10`	10	Dropdowns
`-z--20`	20	Fixed elements (E.g. drawer)
`-z--30`	30	Backdrops
`-z--40`	40	Fixed elements with backdrop (E.g. drawer with backdrop)
`-z--50`	50	Modals
`-z--60`	60	Popovers
`-z--70`	70	Tooltips
`-z--auto`	auto	-

Example #

-z--0

-z--10

-z--20

-z--30

-z--40

-z--50

-z--60

-z--70