Z-index utilities

Notation #

The z-index property determines the ordering of elements along the z-axis. The class names for these utilities come in the following formats:

• .z-{value}
• .z-{breakpoint}-{value}

The {breakpoint} can be sm, md, lg, xl, or xxl. If the breakpoint is not provided, the element will be affected on all screen sizes (including on extra small screens). On the other hand, if it is provided, the element will be affected only for that breakpoint and up.

The {value} can be one of the following:

Examples #

Some of the classes are shown in action below. Please note, these utility classes will only work on elements if they do not have the position: static property.

<!-- First container -->
<div class="position-relative">
  <div class="position-absolute">Box 1.1</div>
  <div class="position-absolute m-2">Box 1.2</div>
</div>

<!-- Second container (with z-index set) -->
<div class="position-relative">
  <div class="z-2 position-absolute">Box 2.1</div>
  <div class="z-1 position-absolute m-2">Box 2.2</div>
</div>

<!-- Third container (with z-index set only for medium screens and up) -->
<div class="position-relative">
  <div class="z-md-3 position-absolute">Box 3.1</div>
  <div class="z-md-0 position-absolute m-2">Box 3.2</div>
</div>

In the above example, the boxes in the first container do not have the z-index set. This means that Box 1.2 is on top of Box 1.1 because it comes after it in the DOM. In the second container, the z-index is set explicitly to make sure that Box 2.1 comes on top of Box 2.2, even though it comes before it in the DOM.

In the third set of boxes, the natural ordering of the boxes along the z-axis is altered only on medium screens and up. Below this width, the ordering will go back to default, with Box 3.2 coming on top, as it comes last in the DOM. You can try resizing your browser window (if you can) to see this for yourself.