| 상황 | 주로 사용하는 position | 설명 및 이유 |
|---|---|---|
| 문서 기본 배치(본문, 문단 등) | static | 대부분의 영역에서 기본값, 별다른 레이아웃 조정이 필요 없을 때 사용 |
| 약간의 위치 조정(살짝 이동) | relative | 원래 위치에서 픽셀 단위로 미묘하게 움직이고 싶을 때, 공간 차지는 그대로 |
| 부모 기준으로 자유롭게 절대 위치 배치 | absolute | 부모(조상)의 position이 relative(또는 absolute 등)일 때 팝업, 툴팁, 메뉴 등 레이어 요소 출력 시 |
| 브라우저 화면 고정(스크롤에도 변하지 않음) | fixed | 네비게이션 바, “맨 위로” 버튼, 알림창 등 항상 화면 특정 위치에 보여야 할 때 |
| 스크롤 시 특정 영역에만 고정 | sticky | 사이트 내 특정 영역을 벗어나기 전까지만 헤더/사이드바를 상단에 고정하고 싶을 때 |
| 레이어 간 순서(겹침) 관리 | (z-index + position) | 모달, 드롭다운, 겹치는 메뉴 등에서 쌓임 순서 지정 시 (static 제외) |
대표적인 예시
- absolute
- 카드에 떠 있는 배지, 툴팁, 드롭다운 메뉴
- 모달창의 내부 닫기 버튼 등
- 부모 요소에 position: relative를 주고, 자식에 absolute로 위치 결정
- fixed
- 화면 최상단 네비, “상단으로” 버튼(항상 보이도록)
- 전체화면 배경 오버레이(모달 뒷 배경 등)
- sticky
- 스크롤 시 페이지 상단에 따라 붙는 헤더/네비
- 옆에서 따라다니는 사이드 메뉴, TOC 등
- relative
- 아이콘 등 미세 위치 조정 시
- absolute 포지션 자식에 기준 역할(별다른 레이아웃 이상이 없게)
- static
- 특별한 배치 없이 기본적인 흐름 유지가 중요할 때
- 대부분의 문단, 이미지, 기본 카드 등
실무 팁
- 부모-자식 관계에서 absolute는 부모(position: relative 등)를 기준으로 위치를 잡음
- fixed는 항상 뷰포트 기준, absolute는 조상 기준
- sticky는 자신이 속한 영역(부모) 안에서만 fixed처럼 동작하니, 의도치 않게 부모 영역을 초과하지 않는지 확인 필요
요약
- 기본 흐름: static
- 작게 조정: relative
- 부모 기준 레이어: absolute
- 화면 전체 기준 고정: fixed
- 스크롤시 고정: sticky