🎯 z-index 작동 원리와 쌓임 맥락(Stacking Context) 완전 이해

🎯 z-index 작동 원리와 쌓임 맥락(Stacking Context) 완전 이해

z-index는 요소의 쌓이는 순서를 제어하는 CSS 속성입니다. 그런데 분명 z-index: 9999로 설정했는데도 위로 올라오지 않는 경우가 있죠? 그 이유는 바로 Stacking Context(쌓임 맥락)에 있습니다.

---

1️⃣ z-index 기본 개념

• 기본값은 auto
• 숫자가 클수록 위에 쌓임
• 적용되기 위해선 position 속성(static 제외)이 설정되어 있어야 함

.box {
  position: relative;
  z-index: 10;
}

주의: position이 static일 경우 z-index는 적용되지 않습니다.

---

2️⃣ Stacking Context(쌓임 맥락)란?

브라우저는 요소를 렌더링할 때 서로 다른 계층(Context) 안에서 z-index를 비교합니다. 즉, z-index는 같은 Stacking Context 안에서만 우선순위를 결정합니다.

Stacking Context가 생성되는 조건

• position: relative | absolute | fixed | sticky + z-index 지정
• opacity < 1
• transform, filter, perspective 사용
• will-change, mix-blend-mode, isolation: isolate 등

.parent {
  position: relative;
  z-index: 1; /* 새로운 stacking context 생성 */
}
.child {
  position: absolute;
  z-index: 9999; /* ❌ 부모를 벗어나지 못함 */
}

👉 부모 .parent가 하나의 "계층"이 되어버리기 때문에, 자식이 아무리 높은 z-index여도 다른 stacking context 바깥 요소 위로 올라가지 못합니다.

---

3️⃣ 실전 예제: z-index가 무시되는 이유

.modal {
  position: fixed;
  z-index: 9999;
}
.parent {
  transform: translateZ(0); /* stacking context 생성됨 */
}
.child {
  position: relative;
  z-index: 10000;
}

위 예제에서 .child는 .modal보다 z-index가 높지만, .parent 안에 있기 때문에 modal보다 위로 올라오지 않습니다.

---

4️⃣ 개발자 도구에서 stacking context 확인하는 법

• Chrome DevTools에서 요소 선택 후 “Stacking Context” 계층 확인
• z-index가 안 먹는 경우 → 부모 요소에 stacking context 생성 조건이 있는지 확인

특히 opacity: 0.99, transform 같이 "레이아웃 영향 없는 시각 효과"들이 의도치 않게 stacking context를 만드는 경우가 많습니다.

---

📌 실전 정리 팁

• z-index는 같은 context 안에서만 의미가 있음
• 모달, 팝업 등은 body 하위에 직접 추가하는 것이 안정적
• position + z-index 조합을 명확히 관리
• 불필요한 transform 등은 제거하여 stacking context 복잡도 줄이기

---

📌 요약

개념	설명
z-index	요소의 쌓이는 순서를 숫자로 표현
stacking context	요소의 z-index 비교가 가능한 독립된 계층
문제 원인	부모 요소가 stacking context일 경우 z-index 무력화됨

---

📌 다음 글 예고

다음 글: “Flexbox 핵심 속성 정리 – 정렬, 정렬, 정렬!”에서는 Flexbox의 축 개념과 정렬 속성을 중심으로 실전 배치를 정리합니다.