position 을 어떻게 사용하는지

position은 CSS 속성 중 하나로, HTML 요소의 위치를 조절하는 데 사용됩니다.

static (기본값): 요소가 일반적인 문서 흐름에 따라 위치합니다. top, right, bottom, left와 같은 위치 지정 속성은 static에서는 영향을 주지 않습니다.
relative: 요소를 기본 위치에서 상대적으로 이동시킵니다. top, right, bottom, left 속성에 지정된 값을 사용해 이동 위치를 결정합니다.
absolute: 가장 가까운 부모 요소 중 position 값이 "static"이 아닌 요소에 대한 상대적인 위치를 지정합니다. top, right, bottom, left 속성을 사용해 위치를 결정합니다.
fixed: 뷰포트에 대해 고정된 위치를 설정합니다. 스크롤해도 요소의 위치가 변하지 않습니다. top, right, bottom, left 속성을 사용해 위치를 결정합니다.
sticky: 스크롤 영역 내에서 relative와 fixed의 기능을 혼합하여 사용합니다. 특정 위치에서 스크롤이 발생하면 요소가 고정되며, 해당 영역을 벗어나면 다시 원래 위치로 돌아갑니다. top, right, bottom, left 속성을 사용해 위치를 결정합니다.

 

position 속성을 사용할 때 주의해야 할 점
position 속성을 사용하면 요소가 다른 요소들의 배치와 중첩되는 경우가 많습니다. 이 때는 각각의 요소에 대한 position 값을 제대로 설정하지 않으면 의도하지 않은 결과가 나타날 수 있습니다.
position: absolute나 position: fixed 등으로 요소를 위치 시키면, 해당 요소를 제공하는 HTML 문서의 다른 요소들이 그것을 인식하지 못할 수 있습니다. 예를 들어, position: absolute로 처리한 요소가 원래 위치를 차지하는 요소와 겹치는 문제가 발생할 수 있습니다.
요소에 position 속성 값을 지정하면 해당 요소의 배치를 변경합니다. 이 때, 다른 요소들의 배치 및 레이아웃에 영향을 미칠 수 있습니다.
position 속성을 사용할 때 위치 값을 신중하게 조절해야 합니다. 잘못된 값을 사용하면, 스크린의 하단이나 우측 끝과 같이 보기 좋지 않거나 의도치 않은 박스 띄우기와 같은 문제가 발생합니다.