Z-index • Natura11y
Jump to main contentJump to website footer
Close-up of two zebras

Photo by Vincent van Zalinge

Z-index

Introduction

Use Natura11y's utilities to change the z-index property of an element.

Z-index Utilities

Natura11y provides the following z-index utilities. The z-index property only works with positioned elements, so these utilities also apply position: relative; to the element.

Z-index value 300

.z-index-300

Z-index value 200

.z-index-200

Z-index value 100

.z-index-100


        <div class="z-index-100">...</div>
        <div class="z-index-200">...</div>
        <div class="z-index-300">...</div>
        <div class="z-index-400">...</div>
        <div class="z-index-500">...</div>
        <div class="z-index-600">...</div>
        <div class="z-index-700">...</div>
        <div class="z-index-800">...</div>
        <div class="z-index-900">...</div>
        <div class="z-index-1000">...</div>
        <div class="z-index-1500">...</div>
        <div class="z-index-2000">...</div>
        <div class="z-index-2500">...</div>
Figure 3