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	-