본문 바로가기
🕸웹/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(각도)-->

'🕸웹 > CSS' 카테고리의 다른 글

주요 CSS 프레임워크 - 예쁜 웹디자인, 프론트엔드 템플릿 찾기  (0) 2021.12.04
[20210616] CSS 기초3  (0) 2021.06.16
[20210615] CSS 기초  (0) 2021.06.15