z-index

Controls stacking order. Higher values appear in front. Only works with position set (pr, pa, pf, ps).

Class Patterns

zi{N} format. Use neg-zi{N} for negative values.

Class	CSS	Usage
`zi1`	z-index: 1	One level above default. Slightly overlapping
`zi10`	z-index: 10	Navigation, headers, fixed UI
`zi50`	z-index: 50	Dropdown menus, popovers
`zi100`	z-index: 100	Modal overlays, dialog backgrounds
`zi999`	z-index: 999	Toast notifications, tooltips (topmost)
`neg-zi5`	z-index: -5	Behind parent. Background decorations

Visual Comparison

Check stacking order of overlapping boxes. Higher values in front.

Overlapping boxes — z-index comparison

zi1

zi10

zi50

zi100

Back to front: zi1(purple) → zi10(yellow) → zi50(green) → zi100(red)

Negative z-index — send behind parent

Parent element (reference)

neg-zi5

neg-zi5 element behind parent

Common Values

Consistent z-index scale prevents "z-index wars".

Class	Value	Common Use
`zi1`	1	Overlapping cards, avatar groups, slightly raised
`zi10`	10	Fixed navigation, sticky header
`zi50`	50	Dropdowns, popovers, submenus
`zi100`	100	Modal overlay, side panel background
`zi999`	999	Toast notification, tooltip (always topmost)
`neg-zi5`	-5	Background decoration, hide behind parent

Class Details

`zi{N}`z-index: {N}

Sets stacking order. Append number for desired z-index. Only on non-static positioned elements.

<!-- Fixed Navigation -->
<nav class="ps t0 l0 w100p zi10 bg0F0F17 py12px px2rem">
  <a href="#">Home</a>
  <a href="#">About</a>
</nav>

<!-- Modal overlay + modal body -->
<div class="pf t0 l0 w100p h100vh bg0-0-0-50 zi100 df jcc aic">
  <div class="bg18181B p3-2rem br12px w40rem zi100">
    <h2>Modal Title</h2>
    <p>Modal Content</p>
  </div>
</div>

<!-- Overlapping avatar group -->
<div class="df">
  <div class="pr zi1 w4rem h4rem br100p bg6366F1 b2pxsolidFFFFFF df jcc aic cFFFFFF">A</div>
  <div class="pr zi1 neg-ml12px w4rem h4rem br100p bg34D399 b2pxsolidFFFFFF df jcc aic cFFFFFF">B</div>
  <div class="pr zi1 neg-ml12px w4rem h4rem br100p bgF59E0B b2pxsolidFFFFFF df jcc aic c000000">C</div>
</div>

Common Combinations

`pr zi10`	relative + z-index (navigation)
`ps t0 zi10`	Sticky header (top-fixed on scroll)
`pf t0 l0 w100p zi100`	fixed overlay (modal background)
`pa t0 r0 zi50`	Absolute dropdown (parent-based)
`pr zi1 hover-zi10`	Bring to front on hover (card overlap)

`neg-zi{N}`z-index: -{N}

Negative z-index. Send elements behind parent or for background decorations.

<!-- Background decorative element -->
<div class="pr p2rem bg18181B br8px">
  <div class="pa t0 l0 w100p h100p neg-zi5 bg6366F1 o20 br8px"></div>
  <p class="pr cFAFAFA">This text is displayed in front of decorative elements</p>
</div>

<!-- Hide behind parent -->
<div class="pr bg27272A p2rem br8px">
  <span class="cFAFAFA">Parent content</span>
  <div class="pa neg-t8px neg-l8px w4rem h4rem bg6366F1 br4px neg-zi5"></div>
</div>

Stacking Context

z-index compared only within same stacking context. New context makes values independent.

Conditions creating new stacking context

position + z-index is a value other than auto
opacity less than 1
When transform, filter, perspective is applied
position: fixed or position: sticky

<!-- Stacking context example -->
<div class="pr zi1">
  <!-- Create new stacking context (parent z-index: 1) -->
  <div class="pa zi999 bg6366F1 cFFFFFF p16px">
    zi999 but parent is zi1, so...
  </div>
</div>

<div class="pr zi2">
  <!-- This element appears in front of the zi999 above! -->
  <div class="pa zi1 bg34D399 c000000 p16px">
    zi1 but parent is zi2, so it appears in front!
  </div>
</div>

Key Point

If parent z-index is 1, child zi999 can't appear before sibling z-index 2. Check parent stacking context.

Tips & Notes

position required

z-index doesn't work on position: static. Use with pr/pa/pf/ps.

Use consistent scale

Define scales like zi1, zi10, zi50, zi100, zi999 to prevent z-index wars. Agree on ranges per component.

Negative z-index behind parent

Negative values like neg-zi5 send behind parent background. For decorations, pseudo-element alternatives.

When z-index doesn't work

Check: (1) position is set, (2) parent creates stacking context, (3) comparing within same context.

position top / right / bottom / left opacity