Ready Added in 1.0.0

z-index

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

Migrating to Rivet 2

This version of Rivet is deprecated. View the z-index utilities documentation on the Rivet 2 website.

z-index range

There are 10 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.).

1000

900

800

700

600

500

400

300

200

100

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