Z-index utilities Since v1.1.0+

Halfmoon comes with responsive utility classes which can be used to set the z-index property of elements. This determines the ordering of elements along the z-axis.

Notation #

The class names for the z-index utilities come in the the following formats:

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

The {breakpoint} can be sm, md, lg, or xl. If the breakpoint is not provided, the element will be affected on all screen sizes (including 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
0 Sets the z-index: 0 property
10 Sets the z-index: 10 property
20 Sets the z-index: 20 property
30 Sets the z-index: 30 property
40 Sets the z-index: 40 property
50 Sets the z-index: 50 property
auto Sets the z-index: auto property

You can see some of these classes in action in the example below:

Box 1.1
Box 1.2


Box 2.1
Box 2.2


Box 3.1
Box 3.2

<!-- First container -->
<div class="position-relative"> <!-- position-relative = position: relative -->
  <div class="position-absolute">Box 1.1</div> <!-- position-absolute = position: absolute -->
  <div class="position-absolute m-20">Box 1.2</div> <!-- position-absolute = position: absolute, m-20 = margin: 2rem (20px) -->
</div>

<!-- Second container (with z-index set) -->
<div class="position-relative"> <!-- position-relative = position: relative -->
  <div class="z-30 position-absolute">Box 2.1</div> <!-- z-30 = z-index: 30, position-absolute = position: absolute -->
  <div class="z-10 position-absolute m-20">Box 2.2</div> <!-- z-10 = z-index: 10, position-absolute = position: absolute, m-20 = margin: 2rem (20px) -->
</div>

<!-- Third container (with z-index set only for medium screens and up) -->
<div class="position-relative"> <!-- position-relative = position: relative -->
  <div class="z-md-50 position-absolute">Box 3.1</div> <!-- z-md-50 = z-index: 50 only on medium screens and up (> 768px), position-absolute = position: absolute -->
  <div class="z-md-0 position-absolute m-20">Box 3.2</div> <!-- z-md-0 = z-index: 0 only on medium screens and up (> 768px), position-absolute = position: absolute, m-20 = margin: 2rem (20px) -->
</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 (width > 768px). 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.

Moreover, the width, height, background color, and border of the boxes are set using utility classes. This is not shown in the code for the sake of conciseness.

Coming soon

  • More components
  • More variables and customization
  • Form builder and validator JS
  • Themes and templates

Subscribe for updates


  • We will notify you when the framework gets a substantial update. No spam or marketing.
  • You can also follow us on Twitter and stay updated that way.