CSS
z-index 속성
mukom
2022. 10. 24. 15:41
1. z-index 속성 : 요소 쌓는 순서 정하기
z-index : <숫자>
요소 간의 쌓이는 순서를 지정할 수 있게 도와주는 속성이다.
z-index 값이 작을수록 아래에 쌓이고, 값이 클수록 위에 쌓인다.
이는 화면을 기준으로 말하면 값이 작을수록 뒤쪽에, 값이 클수록 앞쪽에 요소가 나타나는 것이다.
값을 따로 지정하지 않은 경우 1 의 값을 가지며, 그 후에 삽입되는 요소들은 값이 점점 커지게 된다.
즉, 뒤의 요소가 점점 더 앞으로 쌓이는 것이다.
먼저 z-index 값을 지정하지 않았을 경우를 살펴보자.
<style>
.wrapper {
position: relative;
width: 500px;
height: 500px;
}
.box {
position: absolute;
width: 50px;
height: 50px;
}
.box1 {
top: 30px;
left: 50px;
background-color: mediumslateblue;
}
.box2 {
top: 50px;
left: 80px;
background-color: cadetblue;
}
.box3 {
top: 90px;
left: 60px;
background-color: darksalmon;
}
</style>
</head>
<body>
<div class="wrapper">
<div class="box box1">1</div>
<div class="box box2">2</div>
<div class="box box3">3</div>
</div>
</body>
박스가 문서 상에 작성된 순서대로 쌓인 것을 확인할 수 있다.
그럼 임의로 z-index 값을 지정하여 쌓이는 순서를 변경해 보겠다.
<style>
.wrapper {
position: relative;
width: 500px;
height: 500px;
}
.box {
position: absolute;
width: 50px;
height: 50px;
}
.box1 {
top: 30px;
left: 50px;
background-color: mediumslateblue;
z-index: 3;
}
.box2 {
top: 50px;
left: 80px;
background-color: cadetblue;
z-index: 1;
}
.box3 {
top: 60px;
left: 40px;
background-color: darksalmon;
z-index: 2;
}
</style>
</head>
<body>
<div class="wrapper">
<div class="box box1">1</div>
<div class="box box2">2</div>
<div class="box box3">3</div>
</div>
좀 더 겹쳐 보기 위해 위치를 조정하였다.
이미지에서도 확인할 수 있듯이 문서상 작성된 순서는 1-2-3 이었지만
z-index 값에 따라 2-3-1 순서로 앞에 쌓였음을 알 수 있다.
해당 속성은 문서 상에서 다른 요소와 절대 겹쳐져 보이면 안 되는 속성,
예를 들어 네비게이션 바와 같은 요소에 아주 높은 값을 줘서 항상 앞에 있는 효과를 줄 때 사용할 수도 있다.