쌓임 맥락(Stacking Context)
가상의 z축을 상정하여 HTML요소들을 3차원으로 개념화한 것으로 요소들이 쌓이는 순서에 영향을 미친다.
기본적으로 HTML 요소는 DOM 순서에 따라 쌓인다.
- HTML 상에서 위쪽에 위치 할수록 아래쪽에 쌓이는 방식
- position 속성이 적용되어 있는 요소들은 z-index 값이 낮을수록 아래쪽으로, 높을수록 위쪽으로 쌓인다
- 특정 요소의 렌더링 순서는 그 요소들이 가진 특별한 속성으로 인해 쌓임 맥락이 생성되기 때문에 자신의
z-index속성 값에 영향을 받는다.
그런데 특정 조건이 충족되면 새로운 쌓임 맥락이 생성된다. 🔍
- 독립적인 3차원 공간을 만든다.
- 부모 쌓임 맥락의 영향을 받지 않고 해당 쌓임 맥락 내에서만 비교가 이뤄져 쌓임 순서가 결정된다.
쌓임 맥락이 생성되는 조건
- position 속성이 relative 또는 absolute 이고 z-index 값이 auto가 아닌 경우
- position속성이 fixed 또는 sticky인 경우
- display가 flex 또는 grid이고 z-index가 설정된 경우
- opacity 값이 1미만인 경우
- transform, filter, backdrop-filter 등의 속성이 적용되는 경우
- 기타
쌓임맥락의 규칙 (Stacking Order)
한 개의 쌓임맥락 내부에서 요소들이 쌓이는 순서
- 루트 요소(HTML 문서의 태그)
- z-index가 auto인 요소 (기본 흐름)
- z-index가 음수인 요소
- 블록 요소(position: relative/absolute/fixed 없이 배치된 요소)
- z-index: 0을 가진 요소
- z-index가 양수인 요소 (값이 높을수록 위에 배치됨)
쌓임맥락을 다룰 때의 주의점
- z-index가 큰 값이어도 부모의 쌓임맥락 안에서만 적용됨
- position: static인 요소는 z-index를 적용할 수 없음
- opacity, transform 등을 사용하면 의도치 않게 새로운 쌓임맥락이 생성될 수 있음
