[CSS] 쌓임 맥락 Stacking Context

TL;DR

---

• 기본적으로 요소들은 DOM 순서에 따라 쌓인다.
• positioned(position ≠ static) 요소는 non-positioned(position = static) 요소보다 위에 쌓인다.
• positioned 요소들 중 z-index 값이 높을수록 위에 쌓인다.
• 새로운 쌓임 맥락이 생성되면 자식 요소는 해당 맥락 안에서 순서가 결정된다.

 

 

설명

---

쌓임 맥락(Stacking Context)은 HTML 요소들을 가상의 z축(깊이) 방향으로 배치하는 개념이다. 기본적으로 요소들은 DOM 순서에 따라 쌓인다. 즉, 뒤에 정의한 요소일수록 화면에선 위에 위치한다.

 

position을 적용한 요소(positioned)는 position을 적용하지 않은 요소(non-positioned)보다 위에 쌓인다. positioned 요소들 중에선 z-index 값이 높을수록 위에 쌓인다. 참고로 z-index는 positioned 요소에서만 작동한다. 

 

• positioned: position 속성이 static 이외의 값을 가지는 요소
• non-positioned: position 속성이 static인 요소
• position 속성을 지정하지 않으면 기본값 static (non-positioned)
• z-index 속성을 지정하지 않으면 기본값 auto

 

아래 조건을 만족하는 요소는 새로운 쌓임 맥락을 생성한다. 그럼 자식 요소들은 해당 맥락 내에서만 쌓임 순서가 결정돼서 부모의 쌓임 맥락을 벗어날 수 없게 된다. 때문에 자식 요소의 z-index가 부모 요소보다 크더라도 부모 요소가 다른 요소들보다 뒤에 있다면 자식 요소 역시 뒤에 배치된다.

 

1. position: fixed 혹은 position: sticky
2. position: relative 혹은 position: absolute 이면서, z-index 속성이 auto가 아닐 때
3. display: flex 혹은 display: grid 이면서, z-index 속성이 auto가 아닐 때
4. opacity 값이 1 미만일 때
5. transform, filter, backdrop-filter 등 속성이 none이 아닐 때

 

 

예시

---

<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>

 

See the Pen 쌓임 맥락 Stacking Context by ColorFilter (@colorfilter) on CodePen.

 

1. 최상위 쌓임 맥락: B 요소 z-index > A 요소 z-index 이므로 B 요소가 위에 쌓임
2. A 요소 내부의 쌓임 맥락: A-1 요소 z-index > A 요소 z-index 이므로 A-1 요소가 위에 쌓임
3. 최종적으로 (아래쪽) A → A-1 → B (위쪽) 순서로 쌓임

 

 

레퍼런스

---

쌓임 맥락 - CSS: Cascading Style Sheets | MDN

 

---

글 수정사항은 노션 페이지에 가장 빠르게 반영됩니다. 링크를 참고해 주세요