Z-Index

Use z-index utilities to control how positioned elements stack above or below each other. Classes cover small local stacking values, a negative layer, framework-level UI layers for headers and fixed elements, and a maximum escape layer for special cases.

All z-index utilities are pure CSS and do not require the FrontAlign runtime.

Quick reference

Class	Styles	Use case
`z-auto`	`z-index: auto !important`	Let the browser use the natural stacking order.
`-z-1`	`z-index: -1 !important`	Place decorative layers behind the current stacking context.
`z-0`	`z-index: 0 !important`	Create a neutral base layer.
`z-1`	`z-index: 1 !important`	Lift a child element slightly above nearby content.
`z-2`	`z-index: 2 !important`	Stack local badges, controls, or overlays above base content.
`z-3`	`z-index: 3 !important`	Raise small UI parts inside cards or components.
`z-4`	`z-index: 4 !important`	Place local floating elements above lower component layers.
`z-5`	`z-index: 5 !important`	Use as the highest normal local component layer.
`z-header`	`z-index: var(--z-header)!important`	Keep custom headers and navbars above regular page content. Default value is 200
`z-sticky`	`z-index: var(--z-sticky)!important`	Layer sticky elements above page sections while scrolling.Default value is 1020
`z-fixed`	`z-index: var(--z-fixed)!important`	Layer fixed bars, panels, and persistent UI above sticky content. Default value is 1030
`z-max`	`z-index: 9999 !important`	Use only for rare escape layers that must sit above everything else.

-z-1-1

z-00

z-22

z-header200

z-sticky1020

z-fixed1030

z-max9999

Lowest at the back, highest in front

Usage

Apply z-index utilities on positioned elements. In CSS, z-index affects elements that participate in stacking contexts, most commonly elements with position-relative, position-absolute, position-fixed, or position-sticky.

<!-- Local component layering -->
<div class="is-relative z-0">
  <img class="is-relative z-1" src="/preview.jpg" alt="" />
  <span class="is-absolute top-0 right-0 z-2">New</span>
</div>

<!-- App header layer -->
<header class="is-sticky top-0 z-header">
  Header
</header>

<!-- Sticky and fixed layers -->
<aside class="is-sticky top-0 z-sticky">Sidebar</aside>
<div class="is-fixed bottom-0 left-0 right-0 z-fixed">Cookie bar</div>

<!-- Rare escape layer -->
<div class="is-fixed inset-0 z-max">Emergency overlay</div>

Local stacking

Use z-0 through z-5 inside cards, media blocks, nav items, and small component systems. These values are intentionally small so local UI does not accidentally override global app layers.

<div class="is-relative z-0">
  <div class="is-relative z-1">Card body</div>
  <button class="is-absolute top-0 right-0 z-2">Action</button>
  <span class="is-absolute bottom-0 left-0 z-3">Badge</span>
</div>

Negative layer

Use -z-1 for decorative backgrounds, glows, shapes, and pseudo-overlay elements that need to sit behind the main content. Keep the parent in a controlled stacking context with position-relative and z-0.

<section class="is-relative z-0">
  <div class="is-absolute inset-0 -z-1">Decorative background</div>
  <h2>Premium section</h2>
</section>

Header layer

Use z-header for your own site header or navbar when you want a clean, readable layer that sits above page content without jumping into modal-level values.

<header class="is-sticky top-0 z-header">
  <nav>Documentation navbar</nav>
</header>

Sticky and fixed layers

Use z-sticky for sticky elements and z-fixed for fixed elements. z-fixed is intentionally higher than z-sticky, so persistent fixed UI can stay above sticky headers, sidebars, and section anchors.

<aside class="is-sticky top-0 z-sticky">
  Sticky table of contents
</aside>

<div class="is-fixed bottom-0 left-0 right-0 z-fixed">
  Fixed bottom bar
</div>

Maximum layer

Use z-max sparingly. It is useful for emergency overlays, debug panels, or temporary escape layers, but it should not be the default for regular components.

<div class="is-fixed inset-0 z-max">
  Temporary top-most layer
</div>

Common patterns

<!-- Custom documentation header -->
<header class="is-sticky top-0 z-header">Header</header>

<!-- Dropdown inside a local component -->
<div class="is-relative z-0">
  <button class="is-relative z-2">Menu</button>
  <ul class="is-absolute top-full left-0 z-5">…</ul>
</div>

<!-- Sticky sidebar below fixed header systems -->
<aside class="is-sticky top-0 z-sticky">Table of contents</aside>

<!-- Fixed app bar -->
<div class="is-fixed inset-inline-0 bottom-0 z-fixed">App bar</div>

<!-- Decorative background behind content -->
<div class="is-relative z-0">
  <div class="is-absolute inset-0 -z-1">Background glow</div>
  <div>Content</div>
</div>

Layer scale reference

Layer	Value range	Recommended use
`Negative`	`-1`	Decorative backgrounds behind content.
`Base`	`auto, 0`	Natural order and controlled base stacking contexts.
`Local`	`1–5`	Cards, badges, buttons, media controls, and component internals.
`Header`	`100`	Custom headers and navbars above normal page content.
`Sticky`	`1020`	Sticky sidebars, anchors, and scroll-aware UI.
`Fixed`	`1030`	Fixed bars, persistent panels, and page-level floating UI.
`Maximum`	`9999`	Rare escape layers that must override every normal layer.

Usage notes

Use z-0 through z-5 for local component layering only.
Use z-header for custom headers and navbars that should stay above normal content.
Use z-sticky with sticky elements and z-fixed with fixed elements.
Keep z-fixed above z-sticky when fixed UI must remain visible over sticky sidebars or headers.
Use -z-1 only inside a controlled stacking context, usually with position-relative z-0 on the parent.
Avoid using z-max as a default solution. It is meant for rare escape layers.
Z-index does not replace layout structure. Use Flexbox, Grid, inset, and position utilities for placement, then use z-index only for layering.