CSS 심화 공부(16) - z-index
z-index란?
CSS 레이아웃을 만들다보면 동일한 위치에 여러 레이아웃이 겹치는 경우가 발생한다.
이럴 때 사용하는 것이 바로 z-index 속성이다.
z-index는 겹치는 요소가 있을 때 어떤 요소가 위에 표시되고 어떤 요소가 아래에 표시될지 제어할 수 있다.
음식으로 예를 들자 샌드위치의 재료를 어떤 순서로 쌓을 지 정하는 방법이라고 할 수 있다.
샌드위치는 빵, 햄, 치즈, 야채 등을 순서대로 쌓는데 만약에 빵 대신 야채를 가장 밑에 둔다면 어떻게 되겠는가?
이처럼 z-index는 각각의 레이아웃들을 적정한 위치에 배치해서 제작자가 의도한 대로 웹페이지가 동작하도록 만드는데 도움을 준다.
그림을 예로 들면 레이어를 쌓는 순서이다. 디지털 프로그램을 사용해서 그림을 그릴 때 여러개의 레이어를 쌓아 올려서 작품을 완성하는데 사람, 옷, 목걸이, 장식 등 여러 레이어의 순서가 뒤죽박죽이라면 제대로된 그림이 나오지 않을 것이다.
z-index의 작동 방식
z-index 값은 정수 값을 사용하며, 양수, 음수, 0 모두 사용할 수 있다. 값이 클수록 요소가 위에 표시된다.
또한 z-index 속성은 position 속성이 relative, absolute, fixed, sticky 중 하나로 설정된 요소에만 적용된다.
position: static;인 요소에는 적용되지 않는다.
html
<body>
<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>
<div class="box4"></div>
<div class="box5"></div>
</body>css
.box1 {
position: absolute;
top: 10px;
left: 20px;
width: 100px;
height: 100px;
background-color: lightcoral;
z-index: 1;
}
.box2 {
position: absolute;
top: 40px;
left: 40px;
width: 100px;
height: 100px;
background-color: lightblue;
z-index: 2;
}
.box3 {
position: absolute;
top: 80px;
left: 100px;
width: 300px;
height: 200px;
background-color: rgb(198, 173, 230);
opacity:0.8;
z-index: 3;
}
.box4 {
position: absolute;
top: 100px;
left: 200px;
width: 100px;
height: 100px;
background-color: rgb(65, 85, 92);
z-index: 2;
}
.box5 {
position: absolute;
top: 120px;
left: 80px;
width: 100px;
height: 100px;
background-color: rgb(145, 161, 167);
z-index: 4;
}
.box1, .box2, .box3, .box4, .box5{
color: white;
font-size: 20px;
padding: 1px;
font-size: bold;
}
이런식으로 z-index 값이 클수록 위에 표시되고 제트 인덱스의 값이 작을 수록 아래쪽에 표시된다.
(z-index: 3 박스의 경우 투명도를 설정해서 z-index:2 박스들이 비쳐보이도록 설정했다.)
의문 1 : 그럼 모든 요소에 z-index를 적용해서 순서를 정해줘야 하는가?
z-index를 아예 사용하지 않았다면 모를까 이미 제트 인덱스 값을 적용해버렸으면 다른 요소들도 제트 인덱스를 부여해줘야하는 건지 의문이 들 수 있다. (요소가 100만개라면 100만개를 다?)
답은 아니다이다.
z-index는 부모의 쌓임 맥락(Stacking Context) 내에서 작동한다.
쌓임 맥락(Stacking Context, 스태킹 컨텍스트)은 웹 페이지 요소들이 Z축(사용자 방향)으로 어떻게 쌓일지 결정하는 3차원 개념이다.
극장이나 공연장을 보면 좌석의 높이가 점점 높아지는 설계로 되어있다. 거기에 더해 아예 층 자체를 나누어서 1층, 2층, 3층 식으로 좌석이 배치된 경우가 있다.
1층에서 가장 높은 좌석이라도 2층의 가장 낮은 좌석보다 높이가 낮듯이, 웹 페이지에서도 하위 쌓임 맥락(1층)의 요소가 아무리 높은 z-index 값을 가져도 상위 쌓임 맥락(2층)의 가장 낮은 z-index 값을 가진 요소보다 위에 표시될 수 없다.
마찬가지로 부모요소 내의 자식 요소가 아무리 높은 z-index값을 가져도 부모 요소의 쌓임 맥락을 벗어나 다른 요소 위에 표시되지는 않는다.
쌓임맥락이라는 것은 이러한 개념이다.
<div style="position: relative; z-index: 1;">
<div style="position: absolute; z-index: 999; background-color: lightcoral;">
자식 요소
</div>
</div>
<div style="position: relative; z-index: 2; background-color: lightblue; opacity: 0.7; text-align: center;" >
다른 부모 요소
</div>