z-index

: z축 순서를 지정하는 프로퍼티

z-index는 흔히 포토샵의 레이어를 쌓는 것처럼 설명되고 사용되었다.
하지만 그렇게 간단한 것이 아니었다.
z-index에 대해 간과하고 있던 것, 오해하고 있던 것을 정리해보고자 한다

1. z-index는 position이 지정되어 있어야 사용 가능하다.

아래 3개의 박스를 예로 든다.

<!-- html코드 -->
<div id='box1'>box1</div>
<div id='box2'>
  box2
  <div id='box3'>box3</div>
</div>

/* CSS 코드 */
#box1 {
  width: 200px;
  height: 200px;
  background-color: olivedrab;
  font-size: 24px;
}

#box2 {
  width: 200px;
  height: 200px;
  margin-top: -100px;
  background-color: darksalmon;
  font-size: 24px;
}

#box3 {
  width: 200px;
  height: 200px;
  margin-top: -100px;
  margin-left: 100px;
  background-color: darkorange;
  font-size: 24px;
}

box1, box2가 있고 box3는 box2에 속해있는 형태이다.

그 중 box1이 가장 위에 있길 바라며 z-index 값을 99로 설정했다.

#box1 {
  ······
  z-index: 99
}

결과는 다음 이미지와 같다.
이 결과는 z-index를 99999로 줘도 같다.

이유는 position을 지정해주지 않았기 때문이다.
z-index는 position이 지정되어 있어야만 적용되므로, #box1에 position: relative를 추가해주면 다음과 같은 결과를 얻을 수 있다.

2. 깊이(depth)가 같은 것끼리 비교한다.

이번엔 모든 box에 position을 지정한 후, z-index 값을 설정했다. (position과 z-index만 외에는 생략한다.)

#box1 {
  position: relative;
  z-index: 30;
}

#box2 {
  position: relative;
  z-index: 10;
}

#box3 {
  position: relative;
  z-index: 50;
}

이번에는 어떤 순서로 쌓여있을까?
내 경우에는 위부터 box3 - box1 - box2 순으로 쌓여있을 것이라고 예상했다.

결과는 box1 - box3 - box2 순서로 나타난다.

왜일까?

z-index는 같은 depth 즉, 형제 요소끼리 비교하는 것이 원칙이기 때문이다.

box1와 box2 중 box1의 z-index 값이 더 크므로 맨 위에는 box1이 위치한다.
그리고 box2와 box3에서는 box3의 z-index 값이 크므로 box2보다 위에 위치하게 된다.

이를 통해 z-index는 부모에 영향을 받으므로, 아무리 z-index에 큰 값을 지정해도 다른 요소보다 아래에 위치할 수 있다는 것을 알 수 있다.

꼭 기억해야 할 사항✨✨✨

3. z-index의 초기값은 0이 아니다.

z-index의 초기값은 0이라고 알고 있었다.

어떤 글에서 봤는지, 강의에서 들었는지 기억나지 않지만 z-index은 0을 기준으로 한다고 굳게 믿었다.

그렇다면 MDN을 보자.

z-index 명세를 살펴보면 초기값은 0이 아닌 auto 임을 알 수 있다.

그럼 z-index: auto 란 무엇을 의미할까?

z-index에 대한 MDN의 설명은 다음과 같다.

위치 지정 요소(position이 static 외의 다른 값인 요소)의 박스에 대해, z-index 속성은 다음 항목을 지정합니다.

1. 현재 쌓임 맥락에서 자신의 위치.
2. 자신만의 쌓임 맥락 생성 여부.

1번은 모두 잘 알고 있으니 2번을 보자.

'자신만의 쌓임 맥락 생성 여부'

이 말은 z-index: auto로 지정하거나 z-index를 설정하지 않은 경우에는 쌓임 맥락을 생성하지 않는다는 것이다.

(z-index값이 0인 것은 쌓임 맥락은 있지만 값이 0일 뿐이다.)

위에서 사용했던 세 개의 box를 가져와보자.

아까와 달리 box2의 z-index를 주석처리했다.
즉, box2의 z-index 값은 auto다.

#box1 {
  position: relative;
  z-index: 30;
}

#box2 {
  position: relative;
  /* z-index: 10; */
}

#box3 {
  position: relative;
  z-index: 50;
}

이 때의 결과는 box3 - box1 - box2 순으로 나타난다.

box2에 z-index 값을 지정했을 때는 box1과 box2를 비교했다.

하지만 box2의 z-index값이 auto라면 box2의 자식인 box3가 box1과 비교할 대상으로 선정된다.

그 결과 box3(z-index: 50)이 box1(z-index:30)보다 높으므로 box3이 맨 위에 위치한다.

그리고 그 다음인 box1가 오고, 쌓임 맥락이 없는 box2가 맨 아래 위치한다.

결론

z-index를 사용하는 것은 단순하지 않다.

• z-index를 설정했는데 적용되지 않는다면 position을 확인하자.
• z-index는 기본적으로 형제 요소끼리 비교가 우선이다.
• 하지만 형제의 z-index값이 auto라면 형제 요소의 자식도 확인해보자.