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>

https://codepen.io/colorfilter/pen/wBvovZK

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