AAtomic CSS

z-index

요소의 쌓임 순서(stacking order)를 제어합니다. 값이 클수록 앞에 표시됩니다. position이 설정된 요소(pr, pa, pf, ps)에서만 동작합니다.

클래스 패턴

zi{N} 형태로 숫자를 직접 지정합니다. 음수는 neg-zi{N} 패턴을 사용합니다.

클래스CSS용도
zi1z-index: 1기본 요소보다 한 단계 위. 살짝 겹치는 요소
zi10z-index: 10네비게이션, 헤더 등 고정 UI
zi50z-index: 50드롭다운 메뉴, 팝오버
zi100z-index: 100모달 오버레이, 다이얼로그 배경
zi999z-index: 999토스트 알림, 툴팁 (최상위)
neg-zi5z-index: -5부모 뒤에 배치. 배경 장식 요소

시각적 비교

겹쳐진 박스들의 z-index 값에 따른 쌓임 순서를 확인하세요. 값이 클수록 앞에 표시됩니다.

겹치는 박스 — z-index 비교

zi1
zi10
zi50
zi100

뒤에서 앞으로: zi1(보라) → zi10(노랑) → zi50(초록) → zi100(빨강)

음수 z-index — 부모 뒤로 보내기

부모 요소 (기준)
neg-zi5

neg-zi5 요소가 부모 뒤에 위치합니다

자주 쓰는 값

프로젝트에서 일관된 z-index 스케일을 사용하면 "z-index 전쟁"을 방지할 수 있습니다.

클래스값일반적 용도
zi11겹치는 카드, 아바타 그룹 등 살짝 위로
zi1010고정 네비게이션, sticky 헤더
zi5050드롭다운, 팝오버, 서브메뉴
zi100100모달 오버레이, 사이드 패널 배경
zi999999토스트 알림, 툴팁 (항상 최상위)
neg-zi5-5배경 장식, 부모 뒤로 숨김

클래스별 상세

zi{N}z-index: {N}

요소의 쌓임 순서를 지정합니다. 숫자를 직접 붙여 원하는 z-index 값을 설정합니다. position이 static이 아닌 요소에서만 동작합니다.

<!-- 고정 네비게이션 -->
<nav class="ps t0 l0 w100p zi10 bg0F0F17 py12px px2rem">
  <a href="#">Home</a>
  <a href="#">About</a>
</nav>

<!-- 모달 오버레이 + 모달 본체 -->
<div class="pf t0 l0 w100p h100vh bg0-0-0-50 zi100 df jcc aic">
  <div class="bg18181B p3-2rem br12px w40rem zi100">
    <h2>모달 제목</h2>
    <p>모달 내용</p>
  </div>
</div>

<!-- 겹치는 아바타 그룹 -->
<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>

자주 쓰는 조합

pr zi10relative + z-index (네비게이션)
ps t0 zi10sticky 헤더 (스크롤 시 상단 고정)
pf t0 l0 w100p zi100fixed 오버레이 (모달 배경)
pa t0 r0 zi50absolute 드롭다운 (부모 기준)
pr zi1 hover-zi10호버 시 앞으로 (카드 겹침 효과)

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

음수 z-index를 설정합니다. 요소를 부모 뒤로 보내거나 배경 장식 요소에 사용합니다.

<!-- 배경 장식 요소 -->
<div class="pr p2rem bg18181B br8px">
  <div class="pa t0 l0 w100p h100p neg-zi5 bg6366F1 o20 br8px"></div>
  <p class="pr cFAFAFA">이 텍스트는 장식 요소 앞에 표시됩니다</p>
</div>

<!-- 부모 뒤로 숨기기 -->
<div class="pr bg27272A p2rem br8px">
  <span class="cFAFAFA">부모 콘텐츠</span>
  <div class="pa neg-t8px neg-l8px w4rem h4rem bg6366F1 br4px neg-zi5"></div>
</div>

쌓임 맥락 (Stacking Context)

z-index는 같은 쌓임 맥락 안에서만 비교됩니다. 새로운 쌓임 맥락이 생기면 그 안의 z-index는 외부와 독립적으로 동작합니다.

새로운 쌓임 맥락을 만드는 조건

  • position + z-index가 auto가 아닌 값
  • opacity가 1 미만
  • transform, filter, perspective 적용 시
  • position: fixed 또는 position: sticky
<!-- 쌓임 맥락 예시 -->
<div class="pr zi1">
  <!-- 새로운 쌓임 맥락 생성 (부모 z-index: 1) -->
  <div class="pa zi999 bg6366F1 cFFFFFF p16px">
    zi999이지만 부모가 zi1이므로...
  </div>
</div>

<div class="pr zi2">
  <!-- 이 요소가 위의 zi999보다 앞에 표시됨! -->
  <div class="pa zi1 bg34D399 c000000 p16px">
    zi1이지만 부모가 zi2이므로 더 앞에!
  </div>
</div>

핵심 포인트

부모의 z-index가 1이면, 그 자식에 아무리 높은 z-index(zi999)를 줘도 부모 형제의 z-index 2보다 앞에 올 수 없습니다. z-index가 기대대로 동작하지 않으면 부모의 쌓임 맥락을 확인하세요.

팁 & 주의사항

position 필수

z-index는 position: static(기본값)인 요소에서는 동작하지 않습니다. 반드시 pr, pa, pf, ps 중 하나와 함께 사용하세요.

일관된 스케일 사용

zi1, zi10, zi50, zi100, zi999처럼 단계별 스케일을 정해두면 "z-index 전쟁"(9999, 99999...)을 방지할 수 있습니다. 팀 내에서 컴포넌트별 z-index 범위를 합의하세요.

음수 z-index는 부모 뒤로

neg-zi5 등 음수 값은 요소를 부모 배경 뒤로 보냅니다. 배경 장식, 의사 요소 대체 등에 활용할 수 있습니다.

z-index가 안 먹힐 때

z-index가 기대대로 동작하지 않으면: (1) position이 설정되어 있는지 확인, (2) 부모 요소가 새로운 쌓임 맥락을 만들고 있는지 확인, (3) 같은 쌓임 맥락 내에서 비교하고 있는지 확인하세요.

positiontop / right / bottom / leftopacity