Z-index
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>