앞에서 z-index에 대해서 간단하게 배워 봤습니다. 사용법은 어렵지 않지만 실제로 z-index를 쓰다 보면 종종 마음대로 동작하지 않을 때가 있는데요. 이럴 때 도움이 되는 쌓임 맥락(Stacking Context)이라는 개념에 대해 알아보겠습니다. 처음에는 조금 복잡하게 느껴질 수도 있으니까, 일단 쌓임 맥락의 큰 개념만이라도 잡고 넘어가는 걸 목표로 해 봅시다.
z-index: 9999로도 해결이 안 되는 이유
z-index 값은 단순히 서로 비교만 하는 게 아니라, 쌓임 맥락(Stacking Context) 안에서 비교하기 때문인데요.
쌓임 맥락
쌓임 맥락을 간단히 설명하자면, z-index를 묶어서 생각하는 범위라고 할 수 있는데요.
쌓임 맥락을 쓰면 좋은 점이 하나 있는데요, 쌓임 맥락 안에서는 바깥을 신경 쓰지 않고 z-index 값을 쓸 수 있다는 점입니다. 이게 간단한 코드에서는 와닿지 않는데, HTML 태그가 수백 개, 수천 개, 수만 개 있다고 생각해보시면 이것들의 z-index를 고려해서 CSS 코드를 쓰는 게 만만치 않겠죠? 쌓임 맥락만 분명하다면 바깥은 신경 쓰지 않고 코드를 쉽게 쓸 수 있습니다.
댓글