[CSS 공부] 포지션 속성

포지션 속성은 박스 구성요소들을 배치하기 위한 속성입니다. 이 속성에는 static, relative, absolute, fixed, 그리고 sticky와 같은 다섯 가지 값이 있는데, 여기에 대해서 살펴 보겠습니다.

포지션(`position)` 속성 개요

CSS의 position 속성은 웹 페이지 내의 요소들이 어떻게 배치되고 위치를 정할지를 결정하는 중요한 속성입니다. 이 속성에는 static, relative, absolute, fixed, 그리고 sticky와 같은 다섯 가지 값이 있습니다.

static: 이것은 모든 요소의 기본값입니다. static으로 설정된 요소는 일반적인 문서 흐름에 따라 배치됩니다. 또한, top, right, bottom, left와 같은 위치 지정 속성을 사용할 수 없습니다.
relative: 이것은 요소를 일반적인 문서 흐름에 따라 배치하되, 자신의 원래 위치를 기준으로 상대적으로 위치를 조정합니다. top, right, bottom, left와 같은 위치 지정 속성을 사용하여 상대적인 거리를 지정할 수 있습니다.
absolute: 이것은 가장 가까운 부모나 조상 요소 중 position 값이 static이 아닌 것을 기준으로 위치가 결정됩니다(만약 그런 요소가 없다면 body 태그가 기준이 됩니다). absolute로 설정된 요소는 일반적인 문서 흐름에서 제외되며, top, right, bottom, left와 z-index 속성을 사용하여 위치 및 쌓임 순서(stack order)를 조절할 수 있습니다.
fixed: 이것은 뷰포트(viewport)를 기준으로 고정된 위치에 배치합니다. 스크롤을 해도 항상 같은 곳에 남아있습니다. fixed로 설정된 요소 역시 일반적인 문서 흐름에서 제외되며 top, right, bottom,left 와 z-index 속성을 사용하여 위치 및 쌓임 순서(stack order)를 조절할 수 있습니다.
sticky: sticky는 스크롤 할 때 상대적(relative) 또는 고정(fixed) 포지셔닝 사이에서 전환하는 것처럼 동작합니다.

위치 지정 속성 (top / right / bottom / left)과 함께 사용하면 해당 방향에 대해 스크롤 범위 내에서 상대적으로 움직이다가 뷰포트 경계에 닿으면 그 곳에서 멈춥니다.

하지만 Internet Explorer에서는 지원되지 않는 속성이므로 사용에 주의해야 합니다.

position 속성은 박스 구성요소들을 배치하기 위한 속성입니다. 어떤 position 속성을 사용 하느냐에 따라 위치가 달라질 수 있으므로 전체적인 내용을 잘 이해하고 익숙하게 사용할 수 있도록 해야 합니다.

static과 같이 나열한 순서대로 배치되지만 top, right, bottom, left 속성을 사용해 원하는 위치를 지정할 수 있다.
이때 좌표값은 원래 있던 위치 즉, static 기준으로 원래 위치해야 할 곳이 기준이 되며 지정한 속성에 따라 상/하/좌/우 원하는 자리에 배치하는 것이 가능 하다.