쌓임 맥락(Stacking Context)

답변 확인

• HTML 요소들이 화면에 렌더링될 때 쌓이는 순서를 결정하는 개념
• z축(3D 개념)에서 요소들이 쌓이는 방식을 정의
• 부모 요소가 새로운 쌓임 맥락을 생성하면 자식 요소는 그 내부에서만 쌓임 순서가 결정됨
• 즉, 부모 쌓임 맥락을 벗어나 다른 요소와 비교되지 않음

1. 쌓임 맥락이 생성되는 조건

✅ 다음 속성들이 적용되면 새로운 쌓임 맥락이 생성됨

2. 쌓임 맥락의 동작 예제

<div style="position: relative; z-index: 1;">
  A 요소 (z-index: 1)
  <div style="position: absolute; z-index: 999;">A-1 요소 (z-index: 999)</div>
</div>
 
<div style="position: relative; z-index: 2;">B 요소 (z-index: 2)</div>

결과

1. 최상위 쌓임 맥락 내에서 B 요소(z-index: 2)가 가장 위에 위치
2. A 요소(z-index: 1)가 그 아래에 위치
3. 하지만 A 요소 내부의 A-1 요소는 z-index 999라도 부모(A 요소)의 영향권 내에서만 적용됨
4. 따라서 최상위 기준으로 보면, B 요소 > A-1 요소 > A 요소 순으로 쌓이게 됨

3. 정리 및 주의할 점

• ✔ z-index 값이 크다고 무조건 위에 배치되는 것이 아님 -> 쌓임 맥락이 우선 고려됨
• ✔ 부모 요소가 쌓임 맥락을 만들면, 그 내부에서는 자식 요소들끼리만 z-index 비교가 가능
• ✔ opacity, transform 같은 스타일 속성도 새로운 쌓임 맥락을 생성할 수 있음
• ✔ 예상과 다르게 z-index가 동작할 경우, 부모 요소의 쌓임 맥락을 확인하는 것이 중요

🔹 결론

• ✅ 쌓임 맥락은 z축(3D 공간)에서 요소들이 렌더링되는 순서를 결정하는 개념
• ✅ z-index 값만으로 요소의 쌓이는 순서가 정해지는 것이 아니라, 부모의 쌓임 맥락 내에서 비교됨
• ✅ CSS 속성(position, opacity, transform 등)이 새로운 쌓임 맥락을 형성할 수 있음
• ✅ 예상과 다르게 z-index가 동작할 경우, 부모 요소의 쌓임 맥락을 먼저 확인할 것 🚀

📚 참고 자료

• [10분 테코톡] 쑤쑤의 z-index의 동작 방식
• [MDN] Stacking Context (쌓임 맥락)