[Daily] 쌓임 맥락에 대해 설명해주세요

쌓임 맥락(Stacking Context)

: 가상의 z축을 상정하여 HTML 요소들을 3차원으로 개념화 한 것.

• 요소들이 쌓이는 순서에 영향을 미친다.
  → HTML 요소는 DOM 순서에 따라 쌓인다.
  → position 속성이 적용 되어 있는 요소들은 z-index 값이 낮을수록 아래쪽으로, 높을수록 위쪽으로 쌓인다.

• 특정 조건이 충족되면 새로운 쌓임 맥락이 생성된다.
  → 독립적인 3차원 공간을 만들며, 부모 쌓임 맥락의 영향을 받지 않고 해당 쌓임 맥락 내에서만 비교가 이뤄진다.

쌓임 맥락이 생성되는 조건

• position 속성이 relative 또는 absolute이고 z-index 값이 auto가 아닌 경우
• position 속성이 fixed 또는 sticky인 경우
• display가 flex 또는 grid이고, z-index가 설정 된 경우
• opacity 값이 1미만인 경우
• transform,filter, backdrip-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>

(top) B 요소 → A-1 요소 → A 요소 (bottom)
: Z-index 요소가 B가 가장 큼 , 쌓임 맥락 비교 A-1이 z-index 값이 더 크기 때문에 A-1 , 마지막으로 A 요소