position:absolute 와 position:relative;

position:absolute 와 position:relative;


ex)
<div class="test">1<div>
<div class="test2">2</div>
<div class="test3">3</div>


position:absolute - width, height값을 명시하지 않았을 경우 width, height 가 0 으로 설정됨. 그러므로 css에 width값과 height값 명시
position:relative   - width, height값을 명시하지 않았을 경우 width 값 100%(display:block), height값을 기본 block값


.test1{position:absolute; width:100%; height:100%;}
.test2{width:100px; height:100px;}
.test3{position:relative; width:200px; height:100px;}


.test1의 위치값 :  top:0px, left:0px;
.test2의 위치값 : x :0px, y:0px;
.test3의 위치값 : x:100px, y:0px;


position:relative는 먼저 있던 요소(.test2) 다음에 위치하지만 postion:absolute는 요소의 위치와 상관없이
모니터 제일상단(0,0)에 위치함.


레이어 순서는 test1에 맨 밑이고 test2, test3은 같은위치


test1을 제일 위로 가져오려면 z-index을 사용하여 제일 위로 가져옴.