CSS position 이란?

position 속성은 문서 상에서 요소를 배치하는 방법을 지정한다.

---

용어 정리

offset

• top, bottom, left, right 값을 의미한다.
• 기준이 되는 곳으로부터 얼마만큼 떨어져 있는지를 나타내기 위해 필요한 속성이다.

컨테이닝 블록 (Containing Block)

• 요소의 위치와 크기를 지정하는 데 사용되는 블록이다.
• 상대적인 값이나 요소의 위치를 지정하는 기준이 필요할 때 사용한다는 의미이다.

---

static

• position의 기본값이다.
• HTML에 작성한 순서 그대로 화면에 나타나는 것을 의미한다.
• 위에서 아래로, 왼쪽에서 오른쪽으로 순서대로 쌓이는 가장 자연스러운 배치 방식이다.

---

relative

• 기본적으로 static처럼 문서 흐름에 따라 배치된다.
• 여기서 추가로 자기 자신의 원래 위치를 기준으로 offset을 적용하여 이동할 수 있다.
• 쉽게 말해 "원래 내 자리에서 살짝 비켜나는 것"이다.
• 중요한 점은 이동하더라도 원래 자리의 공간은 그대로 유지된다는 것이다. 다른 요소들은 이 요소가 안 움직인 것처럼 배치된다.

---

absolute

• 문서 흐름에서 완전히 빠져나온다. 즉, 다른 요소들은 이 요소가 없는 것처럼 배치된다.
• 그러면 기준이 뭐냐? 가장 가까운 위치 지정 조상 요소(static이 아닌 부모)를 기준으로 배치된다.
• 만약 위치 지정 조상이 없다면 body를 기준으로 삼는다.
• 팝업이나 툴팁처럼 다른 요소 위에 떠있는 UI를 만들 때 주로 사용한다.

---

fixed

• absolute와 마찬가지로 문서 흐름에서 완전히 빠져나온다.
• 차이점은 기준이 부모 요소가 아니라 브라우저 뷰포트(화면 자체)라는 것이다.
• 스크롤을 해도 항상 같은 위치에 고정되어 있다.
• 상단 네비게이션 바나 하단 플로팅 버튼처럼 화면에 항상 고정되어야 하는 UI에 사용한다.

---

sticky

• 평소에는 static처럼 문서 흐름에 따라 배치된다.
• 하지만 스크롤을 하다가 지정한 offset 위치(예: top: 0)에 도달하면 그 순간부터 fixed처럼 고정된다.
• 쉽게 말해 "스크롤을 따라가다가 특정 지점에서 딱 멈추는 것"이다.
• 스크롤 시 상단에 고정되는 테이블 헤더나 사이드바 메뉴 등에 사용한다.

---

최종 정리

CSS의 position 속성은 요소를 화면에 어떻게 배치할지를 결정합니다. 기본값인 static은 HTML 작성 순서대로 자연스럽게 배치되는 것이고, relative는 그 자리에서 살짝 비켜나는 것인데 원래 공간은 그대로 유지됩니다. absolute는 문서 흐름에서 완전히 빠져나와 가장 가까운 위치 지정 조상 요소를 기준으로 배치되고, fixed도 마찬가지로 흐름에서 빠지지만 기준이 뷰포트 즉 브라우저 화면 자체입니다. sticky는 평소에는 static처럼 동작하다가 스크롤이 특정 지점에 도달하면 fixed처럼 고정되는 방식입니다. 정리하면 "문서 흐름에 남아있느냐, 빠져나오느냐" 그리고 "기준점이 어디냐"가 각 속성을 구분하는 핵심입니다.