수업/└HTML&CSS
[CSS]박스_레이아웃 속성 : z-index
onlyun
2022. 1. 3. 16:22
position이 static이 아닐 때(static이면 위치값 안 먹히니까.)
relative, absolute, fixed에서 이용
한 요소 위에 다른 요소를 쌓을 때 사용
z-index 속성값이 클수록 위쪽으로 배치.
속성값에 음수도 가능.
<style>
#box1 {
z-index:3; /* 3개 중 맨 위에 배치 */
}
#box2 {
z-index:2; /* 3개 중 맨 2번째 배치 */
}
#box3 {
z-index:1; /* 3개 중 맨 밑에 배치 */
}
</style>
<body>
<div id="box1"> BOX_1 </div>
<div id="box2"> BOX_2 </div>
<div id="box3"> BOX_3 </div>
</body>순서를 설정하지 않으면 뒤에 나오는 태그가 위쪽으로 배치된다.