CSS에서 각 요소는 수평이나 수직으로 이동할 뿐만 아니라 한 요소 위에 다른 요소를 쌓을 수도 있습니다. 요소 위에 요소를 쌓는 순서를 지정하는 것이 z-index 속성입니다.
z-index
요소들의 수직 위치는 z-index 속성으로 정할 수 있습니다.
예제 1
- 세 개의
<div>요소를 겹치게 배치했습니다. - position 속성을 이용하면 요소를 겹치게 놓을 수 있습니다.
- 코드 상 나중에 입력한 것일 수록 위로 올라옵니다.
<div class="x"></div>
<div class="y"></div>
<div class="z"></div>
div {
position: absolute;
width: 200px;
height: 200px;
}
div.x {
background-color: black;
top: 20px;
left: 20px;
}
div.y {
background-color: skyblue;
top: 70px;
left: 50px;
}
div.z {
background-color: pink;
top: 120px;
left: 80px;
}
예제 2
- z-index 속성을 추가해서 수직 위치를 역순으로 바꿔보겠습니다.
- z-index 속성이 없으면 0처럼 취급합니다. (z-index의 기본값은 auto입니다.)
<div class="x"></div>
<div class="y"></div>
<div class="z"></div>
div {
position: absolute;
width: 200px;
height: 200px;
}
div.a {
background-color: black;
top: 20px;
left: 20px;
z-index: 1;
}
div.b {
background-color: skyblue;
top: 70px;
left: 50px;
}
div.c {
background-color: pink;
top: 120px;
left: 80px;
z-index: -1;
}