본문 바로가기
🕸웹/🟦CSS

[20210615] CSS 기초2

by 캔 2021. 6. 15.
<!DOCTYPE html> 
<html>
<head>
<title>float 배치</title>
<style>
div {
	position:absolute;
}
img {
	position:absolute;
}
#heartA{
	z-index:-3;
	left:10px;
	top:20px;
}#heart2{
	z-index:2;
	left:40px;
	top:30px;
}
#heart3{
	z-index:3;
	left:80px;
	top:40px;
}
#heart7{
	z-index:7;
	left:120px;
	top:50px;
}
</style>
</head>
<body>
<h3>z-index 프로퍼티</h3>
<hr>
<div>
<img id="heartA" src="media/1.jpg" width="100" height="140" alt="하트A">
<img id="heart2" src="media/2.jpg" width="100" height="140" alt="하트2">
<img id="heart3" src="media/3.jpg" width="100" height="140" alt="하트3">
<img id="heart7" src="media/7.jpg" width="100" height="140" alt="하트7">
</div>
</body>
</html>
<!--em(배수), %, px, cm, mm, in(인치), pt(포인터), pc(피카소), deg(각도)-->