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:

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

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.