[CSS] Z-index 프로퍼티

정은아·2022년 9월 19일
0
<!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인 경우에만 작동합니다.

profile
꾸준함의 가치를 믿는 개발자

0개의 댓글