z-index는 요소들의 수직 위치를 정하는 프로퍼티로, z-index를 이용하여 요소들을 겹치게 할 수 있다. z-index의 낮은 값을 가지고 있는 요소 위로 높은 값을 가지고 있는 요소가 쌓인다. z-index는 position이 absolute, relative, fixed, sticky 이거나 flex 혹은 grid에서만 사용이 가능하다. 가장 밑에 있어야 하는 아이템의 경우 z-index: -999; 이런식으로도 사용하기도 한다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.container {
position: relative;
background-color: lightgray;
height: 30vh;
}
.item {
position: absolute;
width: 200px;
height: 200px;
border: 1px solid black;
text-align: center;
}
.first>.item:nth-child(1){
left: 200px;
background-color: lightsalmon;
}
.first>.item:nth-child(2){
left: 150px;
background-color: lightgreen;
}
.first>.item:nth-child(3){
left: 100px;
background-color: lightskyblue;
}
.second>.item:nth-child(1){
left: 200px;
background-color: lightsalmon;
z-index: 3;
}
.second>.item:nth-child(2){
left: 150px;
background-color: lightgreen;
z-index: 2;
}
.second>.item:nth-child(3){
left: 100px;
background-color: lightskyblue;
}
</style>
</head>
<body>
<h1>z-index 적용전</h1>
<div class="container first">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
</div>
<h1>z-index 적용후</h1>
<div class="container second">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
</div>
</body>
</html>
'Frontend > CSS' 카테고리의 다른 글
| CSS에서 계산을 해보자 (calc()) (0) | 2024.07.13 |
|---|---|
| CSS의 사용자 지정 속성(CSS Custom properties) 설정하기 (0) | 2024.07.13 |
| CSS의 grid를 함께 공부해보자 - 2. 이름을 사용한 그리드 배치 (0) | 2024.07.13 |
| CSS의 grid를 함께 공부해보자 - 1. 그리드의 기본 (0) | 2024.07.13 |
| CSS의 flex를 함께 공부해보자 - 2. flex-items (0) | 2024.07.10 |
| CSS의 flex를 함께 공부해보자 - 1. flex-container (0) | 2024.07.10 |
| CSS의 반응형 웹을 위한 미디어쿼리(Media Query) 사용법 (0) | 2024.07.10 |
| CSS : 반응형 웹 디자인을 위한 상대 단위 (0) | 2024.07.10 |