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번을 보자.
'자신만의 쌓임 맥락 생성 여부'
이 말은 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라면 형제 요소의 자식도 확인해보자.
