Z-index

Ready Added in 2.0.0

These utility classes let you easily change the z-index of an element.

Usage

There are 11 z-index utility classes that set z-index values in increments of 100. We chose these increments so that it’s possible to set z-index to custom numbers that fall somewhere between the preset numbers (0, 100, 200, etc.).

highest

900

800

700

600

500

400

300

200

100

0

lowest

<div style="position: relative; height: 550px; width: 100%; overflow-y: scroll;">
    <div class="gls-z-highest z-example">
        highest
    </div>
    <div class="gls-z-900 z-example">
        900
    </div>
    <div class="gls-z-800 z-example">
        800
    </div>
    <div class="gls-z-700 z-example">
        700
    </div>
    <div class="gls-z-600 z-example">
        600
    </div>
    <div class="gls-z-500 z-example">
        500
    </div>
    <div class="gls-z-400 z-example">
        400
    </div>
    <div class="gls-z-300 z-example">
        300
    </div>
    <div class="gls-z-200 z-example">
        200
    </div>
    <div class="gls-z-100 z-example">
        100
    </div>
    <div class="gls-z-0 z-example">
        0
    </div>
    <div class="gls-z-lowest z-example">
        lowest
    </div>
</div>