1. 기본 틀
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>연습용</title>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<div class="container">
<div class="wrapper">
<div class="box_red">box</div>
<div class="box_blue">box</div>
<div class="box_green">box</div>
</div>
</div>
</body>
</html>.container {
border: 6px solid black;
overflow: hidden;
}
/* .wrapper {
border: 4px solid gray;
} */
.box_red, .box_blue, .box_green {
width: 100px;
height: 100px;
color: white;
}
.box_red {
background-color: red;
position: relative;
top: 20px;
left: 20px;
}
.box_blue {
background-color: blue;
position: relative;
top: -40px;
left: 40px;
}
.box_green {
background-color: green;
position: relative;
top: -50px;
left: 15px;
}
논점
현재 세개의 박스를 전부 겹쳐놓은 상태
아래 ~ 위 의 순서는 마크업 한 순서대로 진행 된다
z-index
같은 z-index 값을 각각 박스에 줘보겠다
.box_red {
background-color: red;
position: relative;
top: 20px;
left: 20px;
z-index: 1;
}
.box_blue {
background-color: blue;
position: relative;
top: -40px;
left: 40px;
z-index: 1;
}
.box_green {
background-color: green;
position: relative;
top: -50px;
left: 15px;
z-index: 1;
}
역시 마크업 순서대로 진행된다
z-index 값을 크게 줘보겠다
.box_blue {
background-color: blue;
position: relative;
top: -40px;
left: 40px;
z-index: 2;
}파란박스의 z-index 값을 2로 줘봤다
위로 올라온다
이 상태에서 마크업 순서를 바꿔보겠다
relaive 속성을 준 상태라 박스가 저세상 가버려서 당황했다
top 값을 다시 수정했음
역시나 가장 위에 가있다
결론
z-index의 값은
마크업 < z-index 값
이었다
추가
z-index는 10이나 100단위로 관리해주는게 좋다
중간중간 컨텐츠가 끼어들면 다 꼬여버리는 수가 있다(애매한 숫자로 관리했을시)
이름 값 하는 개발자가 꿈인 사람