stacking context (*z-index문제)

회사에서 겪은 z-index 문제를 해결하다 알게 된 stacking context를 다시 정리한다.

z-index 문제를 처리하다보면 자연스럽게 알게되었다.

mdn문서 내용에 잘 나와있지만 요약하면 핵심은 z-index는 부모의 stacking-context 기준으로 자식태그들 사이에서 렌더링 오더가 결정된다.

태그로 요약하면

<div class="head"> <- z-index 0
  <div>z-index 1000</div>
  <div>z-index 999</div>
</div>
<div class="main">main</div> <- z-index 1
<div class="footer">footer</div> <- z-index 2

가장 위에 보이는 것은 footer
그 다음 main
그 다음 head
head 내에서도 첫번째 div가 가장 위에잇게 된다
z-index 값이 가장 높다고해서 무조건 최상단에 그려지는 것이 아니다.

중요한 점은 렌더링 오더가 부모 태그가 아니라 stacking-context가 발생된 시점(이 시점이 부모)를 기준으로 정해진다는 것.