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
Back to front: zi1(purple) → zi10(yellow) → zi50(green) → zi100(red)
Negative z-index — send behind parent
neg-zi5 element behind parent
Common Values
Consistent z-index scale prevents "z-index wars".
| Class | Value | Common Use |
|---|---|---|
zi1 | 1 | 겹치는 카드, 아바타 그룹 등 살짝 위로 |
zi10 | 10 | 고정 네비게이션, sticky 헤더 |
zi50 | 50 | 드롭다운, 팝오버, 서브메뉴 |
zi100 | 100 | 모달 오버레이, 사이드 패널 배경 |
zi999 | 999 | 토스트 Notification, 툴팁 (항상 최상위) |
neg-zi5 | -5 | 배경 장식, 부모 뒤로 숨김 |
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가 auto가 아닌 값opacity가 1 미만transform,filter,perspective적용 시position: fixed또는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.