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--00Initial value
-z--11Prominent elements (E.g. focused buttons)
-z--1010Dropdowns
-z--2020Fixed elements (E.g. drawer)
-z--3030Backdrops
-z--4040Fixed elements with backdrop (E.g. drawer with backdrop)
-z--5050Modals
-z--6060Popovers
-z--7070Tooltips
-z--8080-
-z--9090-
-z--100100-
-z--autoauto-

Example

-z--0
-z--10
-z--20
-z--30
-z--40
-z--50
-z--60
-z--70
-z--80
<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--black">-z--70</div>
  <div class="-position--absolute -z--80 -bg--primary">-z--80</div>
</div>