Z-index
Use z-index utilities to change the layer orders of elements.
Introduction
Z-index utilities are classes for setting the value of the
z-index property.
They are named using the format zi-{value}.
We use meaningful value words in the class names,
all value words are listed in the below table.
| Word | Value |
|---|---|
| low | -1 |
| normal | 0 |
| high | 1 |
| higher | 2 |
| much-higher | 3 |
| highest | 4 |
Example
<div class="zi-low"></div>
<div class="zi-normal"></div>
<div class="zi-high"></div>
<div class="zi-higher"></div>
<div class="zi-much-higher"></div>
<div class="zi-highest"></div>
Sass Variables
$z-index-low: -1 !default
$z-index-normal: 0 !default
$z-index-high: 1 !default
$z-index-higher: 2 !default
$z-index-much-higher: 3 !default
$z-index-highest: 4 !default