Style Sheet/CSS
CSS z-index 속성
Dexter_-
2018. 9. 17. 12:01
728x90
반응형
z-index 속성
개요
position 속성을 absolute 등으로 변경하면 태그들이 겹치게 될 수 있다.
일반적으로 더 나중에 서언한 태그가 위에 배치된다.
style 속성의 z-index를 이용하면 더 위에 배치시키거나 더 아래에 배치시킬 수 있다.
z-index 값이 높을수록 위, 작을수록 아래에 배치되며 정수 혹은 자연수 값을 사용한다.
사용법
<style>
#box {
z-index:33
}
</style>
예제
<html>
<head>
<style>
.box {
width:150px;
height:50px;
position:absolute;
}
#box1 {
z-index:30;
background-color:cyan;
left:0px;
top:0px;
}
#box2 {
z-index:70;
background-color:blue;
left:50px;
top:30px;
}
#box3 {
z-index:10;
background-color:magenta;
left:100px;
top:60px;
}
</style>
</head>
<body>
<div id="box1" class="box"></div>
<div id="box2" class="box"></div>
<div id="box3" class="box"></div>
</body>
</html>
출력 결과 :
728x90
반응형