레이아웃에서 가장 중요한 요소 3) position

position은 기준을 정해놓고 해당 좌표값을 주어 이동을 하게 하는 css 속성이다.

position 속성을 주면 그 컨텐츠가 block요소였더라도 차지하는 영역이 딱 컨텐츠 크기만큼으로 줄어든다.

position: static

기본값이며, 포지션 속성을 주지 않은 것과 같은 상태이다.

position: relative

1) 자기자신을 기준으로 좌표값이 적용된다.

2) 좌표값은 top과 left만 사용한다. 

우리 문화권에서는 top과 left가 문서가 진행되는 기준이므로 right와 bottom을 주면 기준이 모호해지는 결과를 낳는다. 

3) 처음의 자기 영역의 자리를 차지하면서 시각적으로만 이동하게 된다. 

그래서 다른 요소를 가리기도 하며, 원래있던 자기 자리에 다른 컨텐츠가 들어와 밀어내면 위치가 또 변하므로 이름이 relative(상대적인)으로 정해졌다.

따라서 나는 보통 부모격에 relative를 적용하고 좌표값을 주지 않는다. 아님 그 전체가 살짝 움직여야 할 때만 사용한다.

position: absolute

1) position:static을 제외한 position 값을 갖고 있는 가장 가까운 조상을(parents) 기준으로 좌표값이 적용된다. 만일 position값을 갖고 있는 조상이 없다면 창기준으로 좌표값이 적용된다. 좌표 주기 전에는 현재 내가 있던 위치에서 뜨기만 한다.

2) position을 주는 요소가 width 혹은 height값을 가지고 있다면 좌표의 우선순위는 아래와 같다. 값을 가지고 있지 않다면 모든 좌표에 반응한다.

left > right

top > bottom 

3) absolute는 부모에게 overflow을 주어도 부모가 absolute의 높이값을 계산하지 못한다.

4) inline에 absolute를 주면 block요소가 되고, block요소에 absolute를 주면 inline처럼 보이지만 block요소이다.

position: fixed

1) 브라우저 창을 기준으로 좌표값이 적용된다.