HTML z-index(요소의 중첩 처리)

HTML

by 기련이 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의 값이 크면 위로,
값이 작으면 킽으로 깔림.

'HTML' 카테고리의 다른 글

HTML 투명도 조절 (0)	2020.05.18
HTML 표 (0)	2020.05.18
HTML overflow (0)	2020.05.18
HTML 관계를 고려한 배치(float) (0)	2020.05.18
float 제거 (0)	2020.05.18