Syracuse University Syracuse University
Digital Design System

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>