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

<div class="-position--relative">
  <div class="-position--absolute -z--0  -bg--black">-z--0</div>
  <div class="-position--absolute -z--10 -bg--danger">-z--10</div>
  <div class="-position--absolute -z--20 -bg--warning">-z--20</div>
  <div class="-position--absolute -z--30 -bg--success">-z--30</div>
  <div class="-position--absolute -z--40 -bg--green-40">-z--40</div>
  <div class="-position--absolute -z--50 -bg--grey-20">-z--50</div>
  <div class="-position--absolute -z--60 -bg--grey-10">-z--60</div>
  <div class="-position--absolute -z--70 -bg--primary">-z--70</div>
</div>