step11. z-index
<style>
.wrapper{
position: relative;
border: 1px solid red;
}
.wrapper img{
position: absolute;
width: 200px;
}
#one{
top: 100px;
left: 100px;
/* z-index 값이 상대적으로 크면 작은거 보다 위에 배치 된다.*/
z-index: 10;
}
#two{
top: 150px;
left: 150px;
z-index: 9;
}
#three{
top: 200px;
left: 200px;
z-index: 8;
}
</style>
</head>
<body>
<h1>z-index 테스트</h1>
<div class="wrapper">
<img id="one" src="images/image1.png"/>
<img id="two" src="images/image2.png"/>
<img id="three" src="images/image3.png"/>
</div>
</body>
- 화면에 있는 객체들을 배치할 때, 쌓이는 순서가 중요할 수도 있다. 그럴 때 z-index를 사용한다. 이전에 javascript의 event를 다룬 게시물에서 화면을 기준으로, web page를 기준으로, 객체를 기준으로 하는 x축과 y축에 대해 작성했던 적이 있다. 더하여 z 축을 생각해본다면, 그 방향은 화면을 뚫고 밖으로 나오는 방향을 양의 방향이라고 생각하면 되겠다.
- z-index가 크면 작은 것보다 위에 위치한 것인 상대적인 값이라 크기는 중요하지 않다. 만약에 크기가 같다면 나중에 쓴 객체가 보다 위로 오게 된다.
댓글