Syntax

Z Index

Set the z-order of a positioned element.

🚧This page is still under construction and some content may not be complete.

Overview

ClassDeclarations
z:valuez-index: value;

Use z-index:value to order of overlapping eleemnts. Value is an integer that can be positive, negative or zero.

1
2
3
4
5
<div class="z:9">1</div>
<div class="z:3">2</div>
<div class="z:1">3</div>
<div class="z:-1">4</div>
<div class="z:-9">5</div>

Conditionally apply

Apply styles based on different states using selectors and applying conditionally.

<div class="z-index:1:hover z-index:1@sm z-index:1@dark z-index:1@print"></div>
Design Token
Colors

Customizing color variables or starting with the crafted palette.

© Aoyue Design LLC.