position

css의 position속성은 문서 내의 요소의 위치를 지정하는데 사용됩니다.
이 속성을 사용하면 문서의 특정 위치로 이동시키거나, 다른 요소에 상대적으로 배치하는 것이 가능해집니다.

position 속성의 값들을 살펴봅시다

static

• default 위치 지정방식입니다.
• top, right, bottom, left속성을 사용해도 위치가 변경되지 않습니다.
• 대부분의 요소는 기본적으로 position: static 상태입니다

relative

• 요소의 원래 위치를 기준으로 상대적으로 이동합니다.
• top, right, bottom, left 속성을 사용하여 원래 위치에서 얼마나 멀이 이동할지 지정할 수 있습니다.
• 원래 위치는 여전히 레이아웃에서 차지하고 있으며, 상대적으로 이동한 위치는 그 위에 겹쳐서 표시됩니다.
• 그러니까 다시 말하면, 위치 이동시킨 건 임의로 이동 시킨 것이며, 위치는 그대로 있다고 간주한다.

absolute

• 가장 가까운 상위요소 중 position 값이 static이 아닌 요소 (relative, absolute, fixed, sticky)를 기준으로 위치가 지정됩니다.
• 상위 요소가 없으면 body태그를 기준으로 합니다.
• top, right, bottom, left 속성을 사용하여 위치를 지정할 수 있습니다.
• 기존 문서의 흐름에서 완전히 제거되며, 다른 요소들은 이 요소가 존재하지 않는것처럼 동작합니다.

fixed

• 뷰포트(브라우저창)을 기준으로 위치가 지정됩니다.
• 스크롤을 해도 요소의 위치는 고정됩니다.
• top, right, bottom, left 속성을 사용하여 위치를 지정할 수 있습니다.
• absolute와 마찬가지로 기존 문서의 흐름에서 완전히 제거됩니다.

sticky

• relative와 fixed 위치 지정방식의 조합입니다.
• 스크롤 위치에 따라 상대적(relative) 또는 고정(fixed) 위치를 가질 수 있습니다.
• top, right, bottom, left 속성을 사용하여, 고정되어야 할 지점을 지정할 수 있습니다.

position 값들을 사용할 때, top, right, left, bottom, z-index등 여러가지 추가 속성들과 함께 위치와 겹침을 더 세세하게 제어할 수 있습니다.