Z-index

Utility classes for controlling stacking order, plus the cascade layer system that eliminates specificity wars.

Z-index utilities

Set the stacking order of positioned elements with .z-{value} classes. Values follow a stepped scale so layers stay consistent across the project.

<div class="docs-z-stack">
  <div class="docs-z-stack__layer docs-z-stack__layer--1 z-10 border p-2 bg-surface">z-10</div>
  <div class="docs-z-stack__layer docs-z-stack__layer--2 z-20 border p-2 bg-surface">z-20</div>
  <div class="docs-z-stack__layer docs-z-stack__layer--3 z-30 border p-2 bg-surface">z-30</div>
</div>

z-10

z-20

z-30

Cascade layer order

The library organises all styles into CSS cascade layers. Layers listed later take precedence over earlier ones when specificity is equal, eliminating selector-weight hacks.

Layer	Priority	Purpose
`reset`	1 (lowest)	Browser normalisation and box-sizing defaults
`tokens`	2	CSS custom properties for spacing, colour, type scale
`base`	3	Element defaults for headings, paragraphs, tables, media
`layout`	4	Structural blocks like shell, container, grid, section
`blocks`	5	Component blocks like card, button, badge, table
`helpers`	6	Named helper classes for typography and visibility
`utilities`	7 (highest)	Single-property overrides that always win

How layers affect specificity

Because utilities sit in the highest layer, a simple utility class like .text-center will always override a lower-layer rule, even if the lower rule has higher selector specificity. This means you can always apply a utility on top of any component class without resorting to !important.

<!-- The utility text-center overrides any text-align set by ln-card -->
<div class="ln-card border mb-3">
  <div class="ln-card__body text-center">
    <p>This text is centred by the utility, not the card.</p>
  </div>
</div>

<!-- Utilities always override block-level styles -->
<div class="ln-section ln-section--space-lg border p-0">
  <div class="ln-section__inner">
    <p>The p-0 utility removes the section padding.</p>
  </div>
</div>

This text is centred by the utility, not the card.

The p-0 utility removes the section padding.

Layer declaration

The layer order is set once at the top of the compiled stylesheet. All rules in the library are assigned to their respective layers using @layer blocks.

/* Compiled output — layer order declaration */
@layer reset, tokens, base, layout, blocks, helpers, utilities;

@layer reset {
  /* box-sizing, margin reset */
}

@layer tokens {
  :root { --s1: 0.5rem; /* … */ }
}

@layer base {
  h1, h2, h3 { /* element defaults */ }
}

@layer layout {
  .ln-grid { /* grid block */ }
}

@layer blocks {
  .ln-card { /* component block */ }
}

@layer helpers {
  .lead { /* helper classes */ }
}

@layer utilities {
  .text-center { text-align: center; }
}

Reference

Class	Description	Responsive
`.z-0`	`z-index: 0`	No
`.z-10`	`z-index: 10`	No
`.z-20`	`z-index: 20`	No
`.z-30`	`z-index: 30`	No
`.z-40`	`z-index: 40`	No
`.z-50`	`z-index: 50`	No
`.z-auto`	`z-index: auto`	No