[HTML, CSS] z-index 속성

z-index 속성은 요소들의 상대적 깊이를 조정할 수 있게 합니다. 웹페이지 안에서 상하좌우를 조정하는 x축과 y축에 z축을 추가하는 것입니다. 이를 통해서 요소들이 겹치게 되었을 때, 어떤 요소가 앞으로 나오는지가 정해집니다. 

z축과 관련해서는, 보통 코드 안에서 뒤에 위치한 요소가 앞으로 나오게 됩니다. 하지만 z-index 속성을 사용하면 이런 규칙에 영향을 받지 않고 새롭게 배치 순서를 정의할 수 있습니다. 

 

z-index 속성값은 auto나 정수 값을 가질 수 있습니다. 만약 auto로 설정되면, z-index 속성이 설정되지 않은 것과 동일한 효과를 가지게 됩니다. 정수 값으로 설정되어 있을 때는, 값이 클수록 앞으로 나오게 됩니다. 같은 정수 값으로 설정된 경우에는 더 나중에 작성된 HTML 코드가 앞으로 나옵니다. 

 

Box 1
(z-index: 7;)

Box 2
(z-index: 3;)

 

* 주의해야 할 것은 z-index 속성은 position 속성이 static이 아닌 요소들(absolute, relative, fixed, sticky)과 flex 아이템들에게만 사용할 수 있습니다. position 속성과 플렉스 레이아웃에 대해서는 다음 글들을 참고하시길 바랍니다. 

[HTML, CSS] position 속성

[HTML, CSS] 플렉스(Flex) 레이아웃 - 컨테이너 편

 

◆ 쌓임 맥락(Stacking Context)

z-index 속성 값이 클수록 위로 올라오게 되는 것은 사실이지만, z-index가 비교되는 범위가 구분되어 있기 때문에 조심해야 합니다. 단순히 속성 값이 크면 전체 HTML 문서 안에서 무조건 우선 순위를 갖는 것이 아닌, 쌓임 맥락이라는 것 안에서 우선 순위를 갖게 됩니다. 즉, 한정된 범위 안에서의 비교 기준이 만들어지는 것입니다. 

 

  <div class="box" id="item1">
    Box 1 <br>(z-index: 1;)
    <div class="box" id="item3">
      Box 3 <br>(z-index: 5;)
    </div>
  </div>
  <div class="box" id="item2">
    Box 2 <br>(z-index: 3;)
  </div>

 

Box 1
(z-index: 1;)

Box 3
(z-index: 5;)

Box 2
(z-index: 3;)

 

이 예시를 보면, Box 3의 z-index 속성 값이 Box 2의 z-index 속성 값보다 크지만 Box 2가 앞에 나와있습니다. 그 이유는 Box 2와 Box 3의 쌓임 맥락이 다르기 때문입니다. 코드를 살펴보면 Box 3은 Box 1 내부에 있는 것을 알 수 있습니다. 그런데 Box 1의 z-index 값이 Box 2의 z-index 값보다 낮기 때문에 자식 요소인 Box 3도 Box 2에 가려지게 됩니다.

따라서 부모 요소에 z-index 값이 설정되어 있다면, 자식 요소도 우선적으로 부모 요소의 z-index 값이 적용됩니다. 만약 부모 요소에 설정된 z-index 값이 없다면, 다음의 예시처럼 같은 맥락 안에서 비교가 가능해집니다.

 

Box 1
(z-index: auto;)

Box 3
(z-index: 5;)

Box 2
(z-index: 3;)