‘z-index’로 레이어에 깊이 속성 주기
여러 개의 레이어를 absolute 포지션으로 중첩되게 위치시키는 경우, 어느 것이 위로 나오고 어느 것이 아래로 나오게 할 것인지를 결정하기 위해 ‘z-index’ 속성을 이용한다.
즉, x축이 가로이고, y축이 세로를 표시한다면, z축은 3차원 공간에서의 깊이를 결정짓는 것이다.
<style>
.layer1 {
position: absolute;
top:50; left:50; width: 400; height:100;
z-index: 1
}
.layer2 {
position: absolute;
top: 20; left:400; width:150; height:300;
background: darkblue;
color: white;
z-index: 2
}
.layer3 {
position: absolute;
top:130; left:50; width:450; height:80;
background: yellow;
z-index: 3
}
</style>
<p> div 태그를 이용한 영역별 깊이 속성 주기</p>
<div class=layer1>첫 번째 영역</div>
<div class=layer2>두 번째 영역</div>
<div class=layer3>세 번째 영역</div>
-----------------------------------------------------
위와 같이 태그를 작성하였다면,
‘style’ 의 ‘class’ 로 지정한 각 레이어(div) 들은 ‘z-index’ 속성에 의해 그 깊이가 정해지는데, 첫 번째 영역이 가장 밑에 깔리게 되고, 두 번째 영역, 세 번째 영역 순으로 가장 상위에 표시된다.
일반적으로, ‘z-index’ 속성을 주지 않으면 가장 나중에 코딩된 순으로 가장 위쪽으로 표시되는데, 코딩을 하다보면 코딩의 구조나 번거로움 때문에 가장 위에 표시될 태그들을 가장 마지막에 코딩하는 것이 힘들게 되기도 한다.
화면의 가장 상단에 표시될 순서로 코딩을 맞춰서 해야 하는 번거로움을 없애기 위해, 위처럼 ‘z-index ’속성을 이용하면, 코딩할 때 굳이 가장 위에 표시될 태그를 가장 마지막에 코딩하기 위해 신경 쓸 필요는 없어지게 된다.
덧글