[CSS] position 설명 (relative, absolute)

position에는 3가지 속성이 있다. relative, absolute, fixed 이 세가지 속성 중 2가지 relative, absolute를 다뤄보겠다.

• relative : absolute를 쓸 때 영역을 잡아주는 역할
• absolute : left, top, right, bottom 값으로 전 화면을 아무런 제약 없이 쓸 수 있는 것

즉, relative를 부모라고 하고 absolute를 그 부모의 자식이라고 가정했을 때 absolute를 이리저리 돌아다니지 못하도록 부모인 relative가 absolute를 돌아다닐 수 있는 영역을 제한해 둔다고 생각하면 쉽다.
그 예로 다음과 같이 소스를 짰을 때,

<style type="text/css">
.relative { width: 400px; height: 400px; position: relative;}
.absolute { width: 100px; height: 100px; position: absolute; left: ; top: ;}
</style>
 
<div class="relative">
    <p class="absolute"></p>
</div>

relative라는 클래스 안에 absolute라는 클래스를 만들고 css로 relative로 width 400, height 400으로 지정하여 absolute는 이 범위안에서 이동 할 수 있도록 한다. 

그리고 absolute가 width 100, height 100으로 이동하면 relative가 지정한 범위안에서 가로 100, 높이 100으로 이동되는 것을 확인 할 수 있을 것이다.
따라서 absolute를 사용하면 relative로 지정된 박스를 중심으로 위치가 조절되는 것이 되므로  

자신의 상위에 위치한 박스를 대상으로 상대적으로 위치가 조정되므로 여러방면에서 이용이 가능하다.

다음 사이트를 참고하자...
http://blog.naver.com/tkdgus830416?Redirect=Log&logNo=70173677850