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.
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--80 | 80 | - |
-z--90 | 90 | - |
-z--100 | 100 | - |
-z--auto | auto | - |
<div class="-position--relative">
<div class="-position--absolute -z--0 -bg--info">-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--brand">-z--80</div>
</div>