HTML
HTML z-index(요소의 중첩 처리)
기련이
2020. 5. 18. 18:01
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>요소의 중첩 처리</title>
<style type="text/css">
#box1 {
position: absolute;
top: 0px;
left: 0px;
width: 100px;
height: 100px;
background-color: red;
z-index:3
}
#box2 {
position: absolute;
top: 30px;
left: 30px;
width: 100px;
height: 100px;
background-color: green;
z-index:2
}
#box3 {
position: absolute;
top: 60px;
left: 60px;
width: 100px;
height: 100px;
background-color: blue;
z-index: 1
}
#box2:hover{
z-index: 10;
}
</style>
</head>
<body>
<div id="box1">박스 1번</div>
<div id="box2">박스 2번</div>
<div id="box3">박스 3번</div>
</body>
</html>
중첩된 요소의 계층화
z축 정렬을 위한 속성 : z-index
z-index의 값이 크면 위로,
값이 작으면 킽으로 깔림.
