Position
Position은 Float 과 동일하게 배치를 위한 요소입니다.
Float의 경우 왼쪽과 오른쪽 두가지 방법의 배치만 할 수 있었다면,
Position은 보다 다양한 위치에 배치를 하실 수 있습니다.
Html의 구조상 가장 아래 있는 내용물은 가장 아래 존재 할 수 밖에 없습니다.
하지만 CSS에서 Position으로 컨트롤 한다면 가장 위로 옮겨서 보여줄 수 있습니다.
Position은 유용하게 잘 사용한다면 정말 좋은 속성이 될 수 있습니다.
허나, 무분별 하게 사용한다면, 유지보수나 관리적 측면에서 크나큰 어려움에 부딛칠 수 있으니,
적절하게 사용하여야 할것 입니다.
Position 속성
Position은 혼자서 배치 될 수도 있으며, 어떠한 기준점으로 부터 배치를 할 수 도 있습니다.
기준점이 존재 하지 않는다면 기본 기준 점은 Body 입니다.
position: absolute; [엘리먼트의 위치를 원하는 위치에 가져다 놓을때 사용하게 됩니다.]
position: relative; [엘리먼트의 위치를 고정 또는 기준점으로 설정 하게 됩니다.]
position: fixed; [엘리먼트의 위치를 항상 제자리에 위치 시킵니다.(따라다님)]
* position: fixed 의 경우 따라다니게 되는 설정이 맞지만 IE6(익스플로러6)에서는 지원하지 않습니다.
Position의 경우 원하는 위치에 배치 하기위해서는,
좌표 값을 지정해줘야 합니다. 즉, 기준점으로 부터의 원하는 위치까지의 거리를 계산 하는 것이죠.
예를 들어, 원하는 위치의 기준점으로 부터 상단은 20px 만큼 왼쪽으로 20px 만큼 이동한다면,
position: absolute;
left: 20px;
top: 20px;
이처럼 사용하게 됩니다.
다시 반복하여 말을 하게되지만, Position은 특수한 경우를 제외하고 가급적 많이 사용 하지 않는게 좋습니다.