쌓임 맥락이란?

Stacking Context는 가상의 z축을 상정하여 HTML 요소들을 3차원으로 개념화한 것
요소들이 쌓이는 순서에 영향을 미침

기본적으로 HTML 요소는 DOM 순서에 따라 쌓임
HTML 상에서 위쪽에 위치할수록 아래쪽에 쌓이는 방식
또한, position 속성이 적용되어 있는 요소들은 z-index 값이 낮을수록 아래쪽으로, 높을수록 위쪽으로 쌓임

그런데 만약 특정 조건이 충족되면 새로운 쌓임 맥락이 생성됨
독립적인 3차원 공간을 만들며, 부모 쌓임 맥락의 영향을 받지 않고 해당 쌓임 맥락 내에서만 비교가 이뤄져 쌓임 순서가 결정됨

ex)

• position속성이 relative 또는 absolute이고 z-index값이 auto가 아닌 경우
• position 속성이 fixed or sticky인 경우
• display가 flex or grid이고, z-index가 설정된 경우
• opacity 값이 1 미만인 경우
• transform, filter, backdrop-filter 등의 속성이 적용되는 경우

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

z-index값이 낮을수록 아래쪽으로 쌓이니 A / A-1 / B 순으로 쌓임(A가 가장 아래)

최상위 쌓임 맥락 내 요소인 A,B의 z-index를 비교하면 B가 위쪽이라 A보다 위에 쌓임
이후 A요소가 형성한 쌓임 맥락내에서는 z-index가 A요소보다 A-1이 크므로 A-1이 위쪽에 쌓임
결국 z-index값이 크다고 무조건 위쪽은 아니고 쌓임 맥락을 고려해야 함