[CSS] Stacking Context 쌓임 맥락 쉽게 이해하기

Stacking Context 이란?

HTML에서 가상의 z 축을 기준으로 쌓이는 순서를 형성하는 영역을 의미해요.

stacking context를 그대로 번역하면 "쌓임 맥락"이라고 나오는데, 굉장히 낯선 용어처럼 느껴져요.

하지만 css의 속성 중 z-index를 사용해 보신 적 있다면, 이미 stacking context를 활용하고 계신 것입니다!

 

<div style="position: absolute; z-index: 4">
  <br /><span class="bold">DIV #1</span>
  <br />z-index: 4;
</div>

<div style="position: absolute; z-index: 3">
  <br /><span class="bold">DIV #2</span>
  <br />z-index: 3;
</div>

<div style="position: absolute; z-index: 2">
  <br /><span class="bold">DIV #3</span>
  <br />z-index: 2;
</div>

<div style="position: absolute; z-index: 1">
  <br /><span class="bold">DIV #4</span>
  <br />z-index: 1;
</div>

 

z-index를 적용한 예시1 (출처 : MDN)

 

위 이미지에서 보이듯, z-index가 클수록 상위에 노출됩니다.

DIV#1, DIV#2, DIV#3, DIV#4는 하나의 영역(context)에서 z-index를 기준으로 어떤 순서로 쌓일지(stacking) 결정되었어요.

 

z-index 외에도 여러 요인에 따라 쌓이는 순서가 결정되는데요,

만약 쌓임 순서에 관여하는 요인이 많아지면 어떤 순서로 쌓일지 예상하기 어려워지고

예상과 다르게 동작할 때 문제점을 찾아내는 것에도 많은 시간이 걸릴 수 있습니다.

 

따라서 HTML 요소들이 어떤 규칙으로 쌓이는지 잘 이해하고 적절하게 css를 사용해야 해요.

이를 이해하기 위해선 stacking context의 동작방식을 알아야 합니다!

 

---

 

Stacking Context는 어떻게 동작하나요?

쌓임 순서를 결정할 때 형제 context에는 관여하지 않고 자식 요소끼리만 고려합니다.

문장이 조금 어려우니까 예시를 들어볼게요!

 

다음과 같은 계층으로 DIV가 있다고 가정하겠습니다.

 

- DIV#1 z-index : 5

- DIV#2 z-index : 2

- DIV#3 z-index : 4

    - DIV#4 z-index: 6

    - DIV#5 z-index : 1

    - DIV#6 z-index : 3

 

z-index가 1인 DIV#5와 z-index가 2인 DIV#2 둘 중 어떤 것이 더 상위에 그려질까요?

 

얼핏 보면 DIV#5의 z-index가 DIV#2 보다 작기 때문에 DIV#2가 더 상위에 그려질 것 같지만,

실제로는 DIV#5가 더 상위에 그려집니다!

 

z-index를 적용한 예시2 (출처 : MDN)

 

그 이유는 앞서 말한 것 처럼 "형제 context에는 관여하지 않고, 자식 요소끼리만 비교"하기 때문입니다!

 

DIV#1, DIV#2, DIV#2은 root의 context에 존재하는 자식요소이기 때문에

DIV#1, DIV#2, DIV#3은 서로의 z-index를 비교하여 층을 쌓습니다.

 

DIV#4, DIV#5, DIV#6은 DIV#3의 context에 존재하는 자식요소이기 때문에

DIV#4, DIV#5, DIV#6 또한 서로의 z-index를 비교하여 층을 쌓습니다.

 

하지만, DIV#5와 DIV#2는 서로 다른 context에 있기 때문에 두 요소를 비교하지 않아요.

대신 DIV#5의 부모인 DIV#3과 DIV#2는 동일한 context에 있기 때문에 그 둘을 비교하고,

DIV#5는 DIV#3의 context를 따라갑니다.

 

즉, DIV#5은 z-index가 1로 설정되어 있지만 그 부모인 DIV#3의 z-index는 4이기 때문에

z-index가 2인 DIV#2보다 상위에 그려집니다.

 

아래의 그림을 통해 한번 더 이해해 봅시다!

 

z-index를 적용한 예시 부연 설명

 

[z-index를 적용한 예시2]는 화면을 위에서 수직으로 내려다 본 것이라면,

이 그림은 요소들이 쌓였는지 보기 위해 앞에서 보았을 때의 모습을 그려보았어요.

 

DIV#4 (z-index : 6), DIV#5 (z-index : 1), DIV#6 (z-index : 3)은 DIV#3 (z-index : 4)의 context에 포함되기 때문에,

마치 z-index 가 DIV#4는  4.6, DIV#5는 4.1, DIV#6은 4.3인 것처럼 동작해요.

 

즉, 4.1는 2보다 큰 숫자이기 때문에 DIV#2보다 DIV#5가 상위에 그려지게 됩니다!

 

---

 

Stacking context가 생기는 조건

stacking context는 아래와 같은 특정 조건을 만족할 경우 생성됩니다. 

1. position이 absolute이거나 relative이고 z-index가 auto가 아닌 요소

2. position이 fixed이거나 sticky인 요소

3. flexbox 컨테이너의 자식 중 z-index가 autho가 아닌 요소

4. opacity가 1이 아닌 요소

5. transform이 none이 아닌 요소

그 외의 조건은 MDN 문서를 참고해 주세요.

 

z-index를 설정했거나 fixed, sticky 요소일 경우 stacking context가 생기는 것은 익숙한데,

opacity, transform은 stacking context가 왜 생성되는 걸까요? 🤔

 

그 이유는 조금 더 학습한 후에 다음 포스트에서 공유해 보겠습니다!