<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>z-index 프로퍼티</title>
<style>
div { position: absolute;}
img { position: absolute;}
#spadeA { z-index : -3; left: 10px; top: 20px;}
#spadeK { z-index : 1; left: 20px; top: 25px;}
#spade2 { z-index : 2; left: 40px; top: 30px;}
#spade3 { z-index : 3; left: 80px; top: 40px;}
#spade7 { z-index : 7; left: 120px; top: 50px;}
</style>
</head>
<body>
<h3>z-index프로퍼티</h3>
<hr>
<div>
<img id="spadeA" src="../images/spade-A.png"
width="100" height="140" alt="스페이드A">
<img id="spadeK" src="../images/spade-k.png"
width="100" height="140" alt="스페이드K">
<img id="spade2" src="../images/spade-2.png"
width="100" height="140" alt="스페이드2">
<img id="spade3" src="../images/spade-3.png"
width=100" height="140" alt="스페이드3">
<img id="spade7" src="../images/spade-7.png"
width="100" height="140" alt="스페이드7">
</div>
</body>
</html>
z-index속성은 위치 지정 요소와
그 자손 또는 하위 플렉스 아이템의 z축 순서를 지정합니다.
더 큰 z-index값을 가진 요소가 작은 값의 요소위를 덮습니다.
position프로퍼티가 fixed나 absolute인 경우에만 작동합니다.
꾸준함의 가치를 믿는 개발자