Z-index utilities

Responsive utility classes which can be used to set the z-index of elements.

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:

{value} Description
n1 Sets z-index: -1 property
0 Sets z-index: 0 property
1 Sets z-index: 1 property
2 Sets z-index: 2 property
3 Sets z-index: 3 property

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.

Box 1.1
Box 1.2
Box 2.1
Box 2.2
Box 3.1
Box 3.2
<!-- First container -->
<div class="position-relative">
  <div class="position-absolute">Box 1.1</div>
  <div class="position-absolute m-2">Box 1.2</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>

<!-- 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>

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.

Help us grow

Our main goal is to make Halfmoon the go-to framework for building websites, dashboards and tools. If you believe in our mission, consider becoming a sponsor and help us grow.

You can email us directly if you have any queries. We are always happy to answer.

Subscribe for updates

We will notify you when the framework gets a substantial update. No spam ever.

Follow us on Twitter so that you can stay updated that way.