CSS의 position 속성은 요소의 위치를 지정하는 데 사용됩니다. 이 속성은 여러 값을 가질 수 있으며, 각 값은 요소의 위치 지정 방식을 변경합니다. 주로 사용되는 position 속성 값은 static, relative, absolute, fixed, 그리고 sticky입니다.
-
position: static;
이 값이 기본값입니다. 요소는 일반적인 문서 흐름에 따라 배치됩니다. top, right, bottom, left 속성은 static 요소에 영향을 주지 않습니다. -
position: relative;
relative로 설정된 요소는 일반적인 문서 흐름에 따라 배치되며, top, right, bottom, left 속성을 사용하여 기본 위치를 기준으로 조정할 수 있습니다. 이 요소는 여전히 다른 요소와 공간을 차지하며, 이동은 시각적인 효과에만 영향을 줍니다. -
position: absolute;
absolute로 설정된 요소는 가장 가까운 상위 요소 중 position 값이 static이 아닌 요소를 기준으로 배치됩니다. 상위 요소가 없으면 문서의 요소를 기준으로 배치됩니다. top, right, bottom, left 속성을 사용하여 위치를 지정하며, 일반 문서 흐름에서 제거되어 다른 요소와 공간을 차지하지 않습니다. -
position: fixed;
fixed로 설정된 요소는 뷰포트(브라우저 창)를 기준으로 위치가 고정되며, 스크롤 시에도 위치가 변하지 않습니다. top, right, bottom, left 속성을 사용하여 뷰포트에 대한 위치를 지정합니다. fixed 요소는 일반 문서 흐름에서 제거되어 다른 요소와 공간을 차지하지 않습니다. -
position: sticky;
sticky로 설정된 요소는 스크롤에 따라 상대적(relative) 또는 고정(fixed) 위치를 가질 수 있습니다. 이 요소는 일반적인 문서 흐름에 따라 배치되지만, top, right, bottom, left 속성을 사용하여 지정된 거리에 도달하면 스크롤 영역에 "고정"되는 것처럼 보입니다.
