CSS Position

CSS position 속성은 문서에 있는 태그를 배치하는 방법을 지정합니다.

static

일반적인 문서의 흐름에 따라 배치합니다. default디폴트 값으로 top, right, bottom, left에 아무런 영향을 주지 않습니다.

relative

요소를 일반적인 흐름에 따라 배치하고 자기자신을 기준으로 top, right, bottom, left의 값에 따라 움직입니다. 즉 원래 있어야할 위치에서 지정한 위치로 이동합니다.

오프셋(좌표에 대한 거리)은 다른 요소에 영향을 주지 않기 때문에 레이아웃에서 차지하는 공간은 static과 동일합니다.

absolute

요소를 일반적인 흐름에서 제거하고, 레이아웃에 공간도 배정하지 않습니다. 그리고 가장 가까운 조상 요소에 top, right, bottom, left을 상대적으로 배치합니다.

즉 부모 요소를 기준으로 지정한 위치로 이동합니다.

fixed

absolute와 마찬가지로 요소를 일반적인 흐름에서 제거하고, 레이아웃에 공간도 배정하지 않습니다. 그리고 첫 컨테이너 블록을 기준으로 삼아 top, right, bottom, left을 넣습니다.

즉 원래 있어야 할 위치를 벗어나 윈도우를 기준으로 지정한 위치로 고정됩니다.