CSS의 위치 지정(positioning) 속성은 HTML 요소가 웹 페이지에서 어디에, 어떤 방식으로 배치될지를 결정하는 핵심 기능입니다. 주요 값으로는 relative, absolute, fixed, 그리고 최근 널리 쓰이는 sticky가 있으며, 각각의 동작 방식은 다음과 같습니다.
1. 상대 위치 지정 (Relative Positioning)
position: relative;는 요소를 원래 자연스럽게 배치되던 위치를 기준으로 이동시킵니다. 예를 들어 left: 20px;를 지정하면 요소가 원래 위치에서 오른쪽으로 20픽셀 이동하고, top: 10px;를 지정하면 아래쪽으로 10픽셀 내려갑니다.
중요한 점은 요소가 이동하더라도 원래 차지하던 공간은 그대로 유지된다는 것입니다. 따라서 주변 요소의 배치에는 영향을 주지 않습니다.
2. 절대 위치 지정 (Absolute Positioning)
position: absolute;가 적용된 요소는 일반적인 문서 흐름에서 벗어나 지정된 좌표에 정확히 배치됩니다. 기준점은 별도의 설정이 없으면 뷰포트(화면)의 왼쪽 상단 모서리가 되지만, 조상 요소 중 position 속성이 static이 아닌 요소(relative, absolute, fixed 등)가 있다면 해당 요소를 기준으로 배치됩니다.
또한 절대 위치로 지정된 요소는 원래 공간을 더 이상 차지하지 않기 때문에, 마치 떠 있는 것처럼 다른 콘텐츠 위에 겹쳐 표현할 수 있습니다.
3. 고정 위치 지정 (Fixed Positioning)
position: fixed;는 요소를 브라우저 창의 특정 위치에 고정하는 방식입니다. 사용자가 페이지를 스크롤해도 요소는 항상 같은 자리에 유지되며, 좌표는 브라우저 창(뷰포트)을 기준으로 계산됩니다.
이 방식은 화면 하단에 항상 떠 있는 '맨 위로' 버튼이나 고정 내비게이션 바, 팝업 알림 등을 만들 때 자주 활용됩니다.
4. 스티키 위치 지정 (Sticky Positioning)
position: sticky;는 상대 위치와 고정 위치의 성격을 결합한 방식입니다. 평소에는 relative처럼 문서 흐름을 따르다가, 스크롤이 지정된 임계점(top, bottom 등)에 도달하면 fixed처럼 화면에 붙어서 고정됩니다.
긴 목록이나 표에서 제목 행을 화면 상단에 계속 보여줘야 하는 경우 등에 유용하게 사용됩니다.
마무리
위치 지정 속성은 웹 레이아웃의 기본이 되는 만큼, 각 값의 기준점과 문서 흐름에 미치는 영향을 정확히 이해하는 것이 중요합니다. 상황에 맞는 값을 선택하면 더욱 직관적이고 유연한 UI를 구현할 수 있습니다.