이번 포스팅에서는 레이어 관련 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
[CSS] 24. Pseudo Elements ( 슈도 엘리먼트 ) (0) | 2016.06.12 |
---|---|
[CSS] 23. Pseudo Classes ( 슈도 클래스 ) (0) | 2016.06.12 |
[CSS] 21. Positioning ( 포지셔닝, 위치 ) (0) | 2016.06.12 |
[CSS] 20. Visibility ( 가시성 ) (0) | 2016.06.12 |
[CSS] 19. Scrollbars ( 스크롤바 ) (0) | 2016.06.12 |