쌓임 맥락

쌓임 맥락(Stacking Context)은 HTML 요소들이 z축(화면 앞뒤 방향)으로 쌓이는 독립적인 3차원 렌더링 공간이다.

핵심 특징

• 각 쌓임 맥락은 내부적으로 독립 — 외부 쌓임 맥락의 z-index와 직접 비교되지 않음
• 쌓임 맥락 내 요소들은 그 안에서만 z-index로 순서를 결정
• 루트(<html>)가 최상위 쌓임 맥락을 형성

생성 조건 (대표)

• position: relative / absolute + z-index가 auto가 아닌 경우
• position: fixed / sticky
• display: flex / grid + z-index 설정
• opacity < 1
• transform, filter, backdrop-filter 속성 적용

쌓임 순서 (같은 맥락 내, 낮은 것부터)

1. 쌓임 맥락 배경 및 테두리
2. 음수 z-index 자식
3. 블록 박스
4. 플로팅 박스
5. 인라인 박스
6. z-index: auto / 0 인 positioned 요소
7. 양수 z-index positioned 요소

예시

부모 A: z-index 1 (쌓임 맥락 생성)
  └ 자식: z-index 999
부모 B: z-index 2 (쌓임 맥락 생성)

렌더링 순서 (위): B > 자식(999) > A

자식의 z-index가 아무리 커도 부모 쌓임 맥락의 z-index를 이길 수 없다.

핵심 정리

z-index가 예상과 다르게 작동하면 부모 요소 중 하나가 새로운 쌓임 맥락을 형성하는지 확인한다.