1. relative (상대적인) position(위치) 값을 가진다.
* position:relative;top:10px;left:20px;
(원래 있어야 될 위치로 부터 top으로 부터 10px, left로 부터 20px 떨어진 위치값을 가지게 된다.)
* 자신이 원래 위치값으로 부터 상대적인 값만큼 이동하게 된다.
*원래 위치했던 영역은 그대로 빈공간으로 남아있다
*자신의 원래 위치값으로 부터 상대적인 값만큼 이동하게 된다
*negative(음수)값도 가질수 있다.
*float과 동시에 쓸수없다.
2. absolute (절대적인) position(위치) 값을 가진다.
*브라우저 body 엘리먼트를 기준으로 top으로 부터 10px, left으로 부터 20px 떨어진 위치값을 가지게 된다
*absolute적용된 엘리먼트는 자신이 있던 원래의 위치의 공간을 잃어버린다.
*absolute 적용된 엘리먼트는 원래의 원래의 위치에서 벗어나서 다른 엘리먼트들이 마치 인식하지 못하여 없는 엘리먼트라고 생각한다.
*float과 비슷하나 body를 기준으로 위치를 지정할 수 있다
*negative(음수)값도 가질수 있다.
여기서 Tip! 부모안에서 자식이 위치를 바꾸고 싶다.body의 기준이아닌!
- 부모 엘리먼트를 기준으로 absolute postion 값을 가지고 싶은 경우
- 자신을 감싸는 부모엘리먼트를 position:relative; 선언하면 된다.
ex)
.d1{width:100px;height:100px;background-color:red;}
.d2{ position:relative;/*부모안에서 자식이 위치를 바꾸고 싶다*/
width:100px;height:100px;background-color:green;}
.d3{position:
width:100px;height:100px;background-color:orange;}
.d4{width:200px;height:50px;background-color:gray;}
<div class="d1">div1</div>
<div class="d2">
<div class="d3">
<div class="d4">div4</div>
</div>
</div>
댓글