z-index란?
겹쳐지는 요소들의 쌓이는 순서를 결정하는것!
순서는 숫자의 크기가 클수록 위에 위치하고 작을 수록 아래 위치하게 됨
예시를 보면 직관적으로 이해 할 수 있다.
HTML 코드
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>z-index</title>
<style>
div#wrapper{
position: relative;
}
div.box{
position: absolute;
width: 200px;
height: 200px;
border: 1px solid black;
font-size: 25px;
}
#b1{
left: 50px;
top: 50px;
background-color: deeppink;
z-index: 10;
}
#b2{
left: 120px;
top: 70px;
background-color: gold;
z-index: 100;
}
#b3{
left: 70px;
top: 110px;
background-color: greenyellow;
z-index: 5 ;
}
</style>
</head>
<body>
<h2>z-index</h2>
<div id="wrapper">
<div id="b1" class="box">1번째 div</div>
<div id="b2" class="box">2번째 div</div>
<div id="b3" class="box">3번째 div</div>
</div>
</body>
</html>
결과물
'코딩공부 > HTML,CSS,JavaScript' 카테고리의 다른 글
| CSS_clear (0) | 2023.03.30 |
|---|---|
| CSS_float (0) | 2023.03.30 |
| CSS_Position (0) | 2023.03.30 |
| CSS_디스플레이 (0) | 2023.03.30 |
| CSS_박스 모델 (0) | 2023.03.30 |
