🧭 개념 정리

쌓임 맥락(Stacking Context)이란, 가상의 Z축을 사용해 HTML 요소를 3차원 개념화한 것이다.

HTML 요소들은 자신의 속성에 따른 우선순위에 맞게 위계를 갖춰 쌓인다.

🚩 쌓임 맥락 생성 조건

• position + z-index (position: static 이거나, z-index: auto인 경우 제외)
• opacity < 1
• transform, filter 등의 특정 스타일 속성 사용
• 스타일 성능 최적화 속성(contain, will-change, isolation, …) 사용

⚖️ stacking order 비교 기준

‘형제 요소 간’ 상대적인 쌓임 관계를 비교하는 기준

1. z-index
2. stacking context 생성 여부
3. position 값 (static인지 아닌지)
4. HTML(DOM) 순서 → 1~3번까지 모두 동일할 경우, 마지막 결정자

📚 stacking order (높음 → 낮음)

쌓임 맥락 ‘내부’에서 자식 요소끼리 쌓이는 순서