Z-index attribute [auto, number, initial]
How to use Z-index
auto 기본값으로 z-index를 지정하지 않은 것과 같다.
number 배치 순서를 결정, 숫자가 낮을수록 뒤에 배치되며 숫자가 높을수록 앞에 나온다.
-1 처럼 음수도 가능하다.
initial 기본값으로 설정한다
아래 image는 z-index 를 적용하지 않고 position-absolute 만으로 한 것을 position-relative로 감싸 정렬시킨 것이다.
1absolute1
2absolute2
3absolute3
4absolute4
5absolute5
6absolute6
[소스보기]
<![CDATA[
<style type="text/css">
#relative1
{
background-color:#99cc00;
width:500px;
height:100px;
position:relative;
top:0px;
left:0px;
}
#absolute1, #absolute2, #absolute3, #absolute4, #absolute5, #absolute6
{
color:yellow;
width:100px;
height:100px;
position:absolute;
}
#absolute11, #absolute22, #absolute33, #absolute44, #absolute55, #absolute66
{
color:yellow;
width:100px;
height:100px;
position:absolute;
}
#absolute1
{
background-color:#FFD9FA;
top:0px;
left:0px;
}
#absolute2
{
background-color:#FFB2F5;
top:0px;
left:30px;
}
#absolute3
{
background-color:#F361DC;
top:0px;
left:60px;
}
#absolute4
{
background-color:#D941C5;
top:0px;
left:90px;
}
#absolute5
{
background-color:#990085;
top:0px;
left:120px;
}
#absolute6
{
background-color:#660058;
top:0px;
left:150px;
}
</style>
]]>
아래 image는 z-index 를 사용해서 위 요소들을 역정렬 시켜 본 것이다.
1absolute1
2absolute2
3absolute3
4absolute4
5absolute5
6absolute6
[소스보기]
<![CDATA[
<style type="text/css">
#relative1
{
background-color:#99cc00;
width:500px;
height:100px;
position:relative;
top:0px;
left:0px;
}
#absolute11, #absolute22, #absolute33, #absolute44, #absolute55, #absolute66
{
color:yellow;
width:100px;
height:100px;
position:absolute;
}
#absolute11
{
text-align:right;
background-color:#FFD9FA;
top:0px;
left:0px;
z-index:6;
}
#absolute22
{
text-align:right;
background-color:#FFB2F5;
top:0px;
left:30px;
z-index:5;
}
#absolute33
{
text-align:right;
background-color:#F361DC;
top:0px;
left:60px;
z-index:4;
}
#absolute44
{
text-align:right;
background-color:#D941C5;
top:0px;
left:90px;
z-index:3;
}
#absolute55
{
text-align:right;
background-color:#990085;
top:0px;
left:120px;
z-index:2;
}
#absolute66
{
text-align:right;
background-color:#660058;
top:0px;
left:150px;
z-index:1;
}
#mspan
{
color:#aa00cc;
}
#mdiv{
border:1px solid brown;
background:#99cc00;
font-weight:bold;
}
</style>
]]>
댓글