There is a newer version of Luda.

Let's go!

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.

WordValue
low-1
normal0
high1
higher2
much-higher3
highest4

Examples

<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