요소 쌓임 맥락
1. 3차원 공간에서의 요소 배치
웹 페이지는 기본적으로 2차원 평면이지만, 요소들이 겹칠 때는 3차원적인 고려가 필요합니다. 이때 사용하는 것이 바로 z-index 속성입니다. z-index는 요소의 쌓임 순서(stacking order)를 결정하며, 어떤 요소가 다른 요소 위에 나타날지를 제어합니다. 이는 파워포인트와 같은 프로그램에서 맨 앞으로 가져오기와 같은 기능이라고 생각하시면 됩니다.
1.1 z-index의 기본 특성
오직 static을 제외한 position 속성값이 적용된 요소의 Z축 순서를 결정할 수 있으며, z-index 값이 더 큰 요소가 값이 작은 요소의 위를 덮어버리게 됩니다.
또한 부모가 z-index를 높여 자식 앞으로 나올 수 없습니다. 자식은 z-index를 낮춰 부모 뒤로 가는 것은 가능합니다.
아래 예제에서 z-index를 사용해보겠습니다. red 박스가 가장 위에 있고, green 박스가 그 다음, blue 박스가 가장 아래에 위치하고 있습니다. 이 box의 순서를 바꾸어 보세요.
[정리]
position이static외의 값을 가진 박스에 대하여 z축의 위치를 지정합니다.- 값이 클수록 제일 위로 배치됩니다.
- 부모가 z-index를 높여 자식 앞으로 나올 수 없습니다.
- 자식은 z-index를 음수값으로 주어 부모 뒤로 갈 수 있습니다.
- 유지보수를 위해 10이나 100 단위로 작업하면 좋습니다. 주로 100단위를 많이 사용합니다.
1.2 쌓임 맥락(Stacking Context)
쌓임 맥락은 요소의 3차원 개념화를 위한 가상의 개념입니다. 쌓임 맥락 내에서 자식 요소들의 쌓임 순서가 결정됩니다.
요소에 position 속성이 없는 경우는 만들어진 순서대로의 z-index 순서를 가집니다. 가장 나중에 만들어진 요소가 가장 높은 z-index를 가집니다. 이때 부모의 z-index 값은 auto 입니다.
이러한 상태의 요소들에 position 속성이 있는 자식이 나타나면 부모의 z-index에 종속적이지 않고 자신만의 독립적인 stacking-context를 가집니다.
만약 부모의 z-index 값이 auto가 아닌 정수값(0 ~ n)이라면 부모의 독자적인 stacking-context가 생성되며, 이때부터 자식의 stacking-context는 부모의 stacking-context에 종속적이게 됩니다. 아래 코드를 살펴보도록 하겠습니다.
<div class="box back">
<div class="box red">
<div class="box green"></div>
</div>
<div class="box blue"></div>
</div><div class="box back">
<div class="box red">
<div class="box green"></div>
</div>
<div class="box blue"></div>
</div>box red는 box green을 자식으로 가지고 있습니다. box blue는 box red와 형제입니다.
이 예시는 z-index와 쌓임 맥락의 복잡한 상호작용을 보여줍니다. 특히 세 번째 경우에서 부모 요소에 z-index를 적용하면 새로운 쌓임 맥락이 생성되어, 자식 요소의 z-index가 이 맥락 내에서만 적용됨을 알 수 있습니다.