Z-index

Add z-index to elements to change stacking order

One can change the stacking order of elements by adding the z-index utility class. Reminder: an element must have a position, such as relative or absolute, defined for the utility to work.

Class Name	CSS Value
.z-index-0	z-index: 0;
.z-index-100	z-index: 100;
.z-index-200	z-index: 200;
.z-index-300	z-index: 300;
.z-index-400	z-index: 400;
.z-index-500	z-index: 500;
.z-index-600	z-index: 600;
.z-index-700	z-index: 700;
.z-index-800	z-index: 800;
z-index: 900;	z-index: 900;
z-index: 1000;	z-index: 1000;

.z-index-1000

.z-index-900

.z-index-800

.z-index-700

.z-index-600

.z-index-500

.z-index-400

.z-index-300

.z-index-200

.z-index-100

.z-index-0

<div class="position-relative">
  <div class="position-relative background-blue z-index-1000 flex flex-items-center flex-justify-center text-white" style="width: 120px; height: 120px; margin-top: -40px;">.z-index-1000</div>
  <div class="position-relative background-blue-light z-index-900  flex flex-items-center flex-justify-center text-white" style="width: 120px; height: 120px; left: 50px; margin-top: -40px;">.z-index-900</div>
  <div class="position-relative background-blue-medium z-index-800  flex flex-items-center flex-justify-center text-white" style="width: 120px; height: 120px; left: 100px; margin-top: -40px;">.z-index-800</div>
  <div class="position-relative background-orange-light z-index-700  flex flex-items-center flex-justify-center text-white" style="width: 120px; height: 120px; left: 150px; margin-top: -40px;">.z-index-700</div>
  <div class="position-relative background-orange-dark z-index-600  flex flex-items-center flex-justify-center text-white" style="width: 120px; height: 120px; left: 200px; margin-top: -40px;">.z-index-600</div>
  <div class="position-relative background-orange z-index-500  flex flex-items-center flex-justify-center text-white" style="width: 120px; height: 120px; left: 250px; margin-top: -40px;">.z-index-500</div>
  <div class="position-relative background-orange-medium z-index-400  flex flex-items-center flex-justify-center text-white" style="width: 120px; height: 120px; left: 300px; margin-top: -40px;">.z-index-400</div>
  <div class="position-relative background-gray-light z-index-300  flex flex-items-center flex-justify-center text-white" style="width: 120px; height: 120px; left: 350px; margin-top: -40px;">.z-index-300</div>
  <div class="position-relative background-gray z-index-200  flex flex-items-center flex-justify-center text-white" style="width: 120px; height: 120px; left: 400px; margin-top: -40px;">.z-index-200</div>
  <div class="position-relative background-gray-medium z-index-100  flex flex-items-center flex-justify-center text-white" style="width: 120px; height: 120px; left: 450px; margin-top: -40px;">.z-index-100</div>
  <div class="position-relative background-gray-dark z-index-0  flex flex-items-center flex-justify-center text-white" style="width: 120px; height: 120px; left: 500px; margin-top: -40px;">.z-index-0</div>
</div>