<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>z-index 프로퍼티</title>
<style>
#first
{
position : relative;
z-index : 30;
width : 200px;
height : 200px;
background : #3366cc;
}
#second
{
position : relative;
z-index : 20;
width : 200px;
height : 200px;
margin-top : -100px;
background : #cc3333;
}
#third
{
position : relative;
z-index : 50;
width : 200px;
height : 200px;
margin-top : -100px;
margin-left : 100px;
background : #ffaa33;
}
/*z-index 값을 적지 않으면 0으로 취급한다.*/
</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="spade2" src="../images/spade-2.png"
width="100" height="140" alt="스페이드2">
<img id="spaed3" 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>
<div id="first">
1st Box
</div>
<div id="second">
2nd Box
<div id="third">
3rd Box
</div>
</div>
</body>
</html>z-index의 경우, 1st가 가장 먼저 나온 이유는 숫자가 높아서이기 때문입니다.
third의 숫자가 가장 높다고요? 맞습니다.
그러나 third는 second 안에 속해있기 때문에 second의 숫자가 first보다 높아야
먼저 나오게 되는 구조입니다.
꾸준함의 가치를 믿는 개발자