<!DOCTYPE html>
<html>
<head>
<style>
div { position : absolute; }
img { position : absolute; }
#spadeA { z-index : -3; left : 10px; top : 20px; }
#spade2 { z-index : 2; left : 40px; top : 30px; }
#spade3 { z-index : 3; left : 80px ; top : 40px; }
#space7 { z-index : 7; left : 120px; top : 50px; }
</style>
</head>
<body>
<div>
<img id="spadeA" src="media/A.png" width="100" height="140">
<img id="spade2" src="media/2.png" width="100" height="140">
<img id="spade3" src="media/3.png" width="100" height="140">
<img id="spade7" src="media/7.png" width="100" height="140">
</div>
</body>
</html>
첨부해논 사진을 보면, 이상하게 7번카드의 위치가 예제의 정답과는 다르게 출력됩니다.
#space7 { z-index : 7; left : 120px; top : 50px; }
-->#spade7 { z-index : 7; left : 120px; top : 50px; }
참고로 오타는 스스로 잡았으면 합니다.