CSS Position이란?
CSS의 position 속성은 요소를 문서 흐름에서 어떻게 배치할지 결정합니다. 특히 absolute와 relative의 관계를 이해하는 것이 핵심입니다.
1. static (기본값)
모든 HTML 요소의 기본 position 값입니다. 문서의 정상적인 흐름(normal flow)에 따라 배치됩니다. top, right, bottom, left, z-index 속성이 적용되지 않습니다.
2. relative (상대 위치)
요소의 원래 위치를 기준으로 이동합니다. 중요한 점은 요소가 차지하는 공간은 원래 위치에 그대로 남아있다는 것입니다. relative의 가장 중요한 역할은 absolute 자식의 기준점이 되는 것입니다.
3. absolute (절대 위치)
문서의 정상 흐름에서 완전히 빠져나옵니다. 가장 가까운 position이 static이 아닌 부모를 기준으로 배치됩니다. 실무 활용: 배지/뱃지(카드 우측 상단), 오버레이(이미지 위 텍스트), 드롭다운 메뉴, 모달 닫기 버튼.
4. fixed (고정 위치)
viewport를 기준으로 고정됩니다. 스크롤해도 항상 같은 위치에 머무릅니다. 실무 활용: 고정 네비게이션 바, FAB(Floating Action Button), 쿠키 동의 배너.
5. sticky (끈적 위치)
relative와 fixed의 하이브리드입니다. 평소에는 relative처럼 동작하다가, 스크롤이 지정된 위치에 도달하면 fixed처럼 고정됩니다. 실무 활용: 섹션 헤더, 사이드바, 목차 네비게이션. 주의: sticky가 작동하려면 부모에 overflow: hidden이 없어야 합니다.
z-index 이해하기
position이 static이 아닌 요소들은 z-index로 쌓임 순서를 제어할 수 있습니다. 실무 권장 체계: 기본 콘텐츠(1~10), 드롭다운(100~200), 네비게이션(500~600), 모달(1000~1100), 토스트(2000+).
핵심 정리
| 값 | 흐름 | 기준점 | 스크롤 | 사용처 |
|---|---|---|---|---|
| static | 정상 | - | 같이 이동 | 기본값 |
| relative | 정상 | 원래 위치 | 같이 이동 | absolute 기준점 |
| absolute | 이탈 | 부모 | 같이 이동 | 배지, 오버레이 |
| fixed | 이탈 | viewport | 고정 | 네비게이션, FAB |
| sticky | 정상→고정 | viewport | 조건부 고정 | 섹션 헤더 |
position 속성을 잘 이해했다면 Compit 챌린지에서 직접 연습해보세요!