<22.07.24> CSS 공부 일지 #11. z-index가 작동하는 원리에 대해

CSS 공부 일지 #11

 

CSS의 Position 기능을 이용하면 기존에 작성했던 HTML 코드 순서에 구애받지 않고 원하는 요소를 띄우거나 원하는 위치에 놓을 수 있다. 특히 absolute 속성을 사용하여 요소를 띄웠을 때 z-index를 활용하여 요소의 순서를 지정할 수 있다. 여러모로 도움이 되는 기능이다. 하지만 많은 요소들을 띄우려 absolute를 지정하고 z-index를 지정하게 되면 어느 순간 z-index가 작동하지 않는 기이한 현상이 발생할 때가 있다. 오늘은 z-index가 HTML에서 어떻게 작동하는지에 대해 알아보고자 한다.

 

1. z-index의 사용법

 

z-index는 HTML 요소에 가상의 z축 요소를 기준으로 순서를 지정할 수 있도록 도와준다. z-index는 position 속성이 지정되었을 때 사용할 수 있으며, 값으로는 0을 포함한 음수나 양수를 모두 사용할 수 있다. 값을 크게 주면 맨 위에 올라오게 된다. z-index의 사용법은 아래와 같다.

 

.element {
    position: absolute;
    top: 10px;
    z-index: 9;
}

 

2. Stacking Context

 

Stacking Context(쌓임맥락)는 가상의 Z축을 사용한 HTML 요소의 3차원 개념화이다. 척 보면 척하고 알기 어려운 설명이다.. 사실 z-index를 초기에 접하고 굉장히 편리하게 사용하고 있었던 입장에서 이러한 Stacking Context는 무척 어려운 개념이면서 이걸 왜 알아야 되지? 라는 의문이 생겼다. 하지만 언젠가는 z-index를 심도있게 다루어야 할 때가 생기면 무조건 알아야하는 개념이라는 생각이 들었다.

 

웹브라우저가 HTML 요소들을 렌더링 할 때, 그 순서는 일반적으로 개발자가 작성한 HTML 태그를 순서대로 렌더링 하는데, z-index는 그러한 부분에서 조금 자유롭게 우선순위를 정해줄 수 있다. Stacking Context은, 같은 부모 밑에 있는 자식 요소들이 함께 앞 뒤로 한꺼번에 움직일 수 있는 하나의 그룹이 되었을 때 발생한다. 조금 더 쉽게 말하면 z-index를 설정한 요소는 자기 자신을 포함하고 있는 부모 요소 내에서만 동작한다는 것이다. 예를 들어보겠다.

 

A요소: z-index: 1

B요소: z-index: 2

C요소: z-index: 4

D요소: z-index: 3

   D1요소: z-index: 1

   D2요소: z-index: 9

   D3요소: z-index: 10

 

만약 HTML 태그가 위와 같이 설정되어있다면, 웹 브라우저에는 A,B,D,C 순서대로 보일 것이다. 즉 C요소가 나머지 요소(A,B,D)들보다 위에 위치할 것이다. 그렇다면 D요소 자식에 있는 세 요소들은 어떨까? D2요소와 D3요소의 z-index가 9와 10으로 매우 크니, C요소를 찍어누르고 맨 위로 올라올까? 정답은 그렇지 않다. D요소의 자식 요소들이 z-index를 통해 렌더링의 우선순위가 정해질 때, Stacking Context가 발생한다. D요소의 자식 요소들의 z-index를 100, 1000, 10000으로 지정해주어도, 부모 요소인 D요소를 절대로 벗어나지 못한다. z-index는 이러한 시스템을 가지고 있는 것이다.

 

실제 HTML과 CSS코드를 살펴보자.

 

  <div class="box a_01">first box</div>
  <div class="box a_02">second box</div>
  <div class="box a_03">third box</div>
  <div class="box a_04">fourth box</div>
  <div class="box a_05">fifth box
    <div class="child b_01">child01</div>
    <div class="child b_02">child02</div>
    <div class="child b_03">child03</div>
  </div>

 

다섯개의 박스가 있고, 마지막 박스에는 child01부터 child03까지 세 개의 자식 div들이 존재한다. 그리고 아래는 위 코드를 꾸며줄 CSS이다.

 

.box {
  border: 1px solid #000;
  position: absolute;
  width: 300px;
  height: 300px;
}

.a_01 {
  top: 0px;
  background-color: #fff;
  z-index: 3;
}

.a_02 {
  top: 20px;
  background-color: #333;
  color: #fff;
  z-index: 4;
}

.a_03 {
  top: 40px;
  background-color: #f00;
  color: #fff;
  z-index: 5;
}

.a_04 {
  top: 60px;
  background-color: #ff0;
  color: #000;
  z-index: 6;
}

.a_05 {
  top: 80px;
  background-color: #00f;
  color: #fff;
  z-index: 1;
}

.child {
  position: absolute;
  width: 150px;
  height: 250px;
}

.b_01 {
  top: 0;
  background-color: #ddd;
  color: #333;
  z-index: 1;
}

.b_02 {
  top: 20px;
  background-color: #f0f;
  color: #fff;
  z-index: 9;
}

.b_03 {
  top: 40px;
  background-color: #000;
  color: #fff;
  z-index: 10;
}

 

위 코드를 크롬에서 확인해보면 아래와 같다.

 

 

z-index를 9와 10으로 설정한 b_02, b_03 클래스를 가진 div가 fourth box보다 위에 나올 것 같지만, 그렇지 않다. 이는 z-index를 설정한 요소에는 Stacking Context가 발생하여, 자식 요소가 z-index를 가질 경우 자식 요소들의 z-index는 부모 요소 내에서만 동작한다는 것을 확인할 수 있다.

 

 

오늘은 z-index의 속성에 대해 알아보았다. stacking context에 대해 어느정도 이해를 하니, 향후 HTML이나 CSS 코드 작성 시 많은 도움이 될 것 같다. 다음에도 새롭게 알게 된 지식이나 재미있는 공부거리가 있으면 포스팅하도록 하겠다.

 

P. S 조잡한 글 읽어주셔서 감사합니다! 혹시나 틀린 정보가 있다면 과감한 지적(하지만 욕은 삼가해주시면 감사하겠습니다 ㅎㅎ) 부탁드립니다.