블록요소의 position 속성 정리

<div id="container">

    <div class="box">머시기거시기거시기머시기</div>

</div>

위의 내용을 두고

box 를 position:relative 로 두면 container 내부에 영역을 차지하고 box div 사이즈가 커지면

container 요소의 사이즈도 커진다. 하지만 box 요소의 top 값을 조정해 이동시켜도 container 의 사이즈가 커지지는 않는다.

top,bottom,left, right 의 값은 먹힌다.

같은 부모 내부의 relative , static 요소간에는 질서가 유지된다.

(만약 같은 부모이고 자신의 앞부분에 static 이나 relative 요소를 추가하고 top 값을 지정하면

자신의 형제요소인 그 요소를 기준으로 top 이 계산되어진다. 부모의 top 을 기준으로한 top 이 아니라 말이다.)

그림으로 자세히 설명하자면

[[왼쪽소스]]

<div id="container">
    <div class="box">머시기거시기거시기머시기</div>
</div>

[[오른쪽소스]]

<div id="container">
    <div>앞</div>
    <div class="box">머시기거시기거시기머시기</div>
</div>

box 를 기본값인 position:static 으로 두면 container 내부에 영역을 차지하고 box div 사이즈가 커지면
container 요소의 사이즈도 커진다. 

또 top,left,bottom,right 값은 먹지 않는다.

그리고 한 라인을 다 차지한다. 

width, height 값은 적용된다. 

box를 position:absolute; 으로 두면 container 내부에 영역을 차지하지 않고 absolute 흐름으로 편입된다. 

부모가 position:absolute 요소 외에 자식이없다면 부모요소의 높이는 0이된다. 

position:fixed 의 경우 absolute 와 같지만 차이점은

브라우져 스크롤을 올리고 내려도 브라우져 client화면의 left,top 을 기준으로 그자리에 고정된다.