[CSS] 22. Layers ( 레이어 )

이번 포스팅에서는 레이어 관련 CSS속성에 대해서 알아보도록 하겠습니다.

 

중학교 때 집합을 배우게 되면 동그라미 두개를 겹쳐서 그리는 것 부터 시작하죠?

그런것이 바로 레이어링 하는 것입니다.

 

레이어링을 위한 속성에는 z-index라는 것이 있습니다.

다음 예제를 한번 볼까요??

 

<div style="background-color:red;
 width:300px;
 height:100px;
 position:relative;
 top:10px;
 left:80px;
 z-index:2">
</div>
<div style="background-color:yellow;
 width:300px;
 height:100px;
 position:relative;
 top:-60px;
 left:35px;
 z-index:1;">
</div>
<div style="background-color:green;
width:300px;
 height:100px;
 position:relative;
 top:-220px;
 left:120px;
 z-index:3;">
</div>

 

결과는 아래처럼 나올 것입니다. 

어떤가요??? 간단하죠???

 

 

 

 

 

 

Reference :  http://www.tutorialspoint.com/css/css_layers.htm