Z-index

Change the z-index property of an element with Natura11y's z-index utilities.

Z-index Utilities

Natura11y provides the following z-index utilities. Z-index works only with positioned elements, so these utilities apply position: relative; to its selector.

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

Introduction

Z-index Utilities