Stacking order utilities z-0 through z-50 plus z-auto — and the stacking-context rules that actually decide. This family contains 8 generated classes in Nakshora 3.0.
Classes#
| Class | Generated CSS |
|---|---|
z-0 | z-index: 0; |
z-10 | z-index: 10; |
z-20 | z-index: 20; |
z-30 | z-index: 30; |
z-40 | z-index: 40; |
z-50 | z-index: 50; |
z-auto | z-index: auto; |
z-hide | z-index: -1; |
Example#
example
<header class="sticky top-0 z-50">…</header>
<dialog class="z-[100]">…</dialog>Responsive & variants#
Every class here accepts screen prefixes (sm: … xl:) and state variants — md:hover:p-4 style stacks compile to a single media query. See responsive/index|Responsive design and variants/index|Variants.
Best practices#
- Reserve bands: 0–10 content, 20–30 dropdowns, 40–50 headers, 100+ modals
- Arbitrary values (
z-[60]) escape the scale when governance demands it
Common mistakes#
- Raising z-index to fight a stacking context created by transform/opacity — fix the context instead
Related#
utilities/spacing/margin|Margin · utilities/sizing/width|Width · responsive/index|Responsive