CSS 레이아웃 마스터링: position 속성의 세계

카테고리

프로그래밍/소프트웨어 개발

서브카테고리

웹 개발

대상자

웹 개발 초보자 및 중급자 (CSS 기본 지식 보유자)

핵심 요약

position 속성의 5가지 값(static, relative, absolute, fixed, sticky)은 레이아웃 제어의 핵심 도구
relative와 absolute의 조합은 절대 위치 요소의 참조 기준 설정에 필수적
fixed는 스크롤 시 고정되는 요소(헤더/푸터), sticky는 스크롤 시 부모 컨테이너 내부에서 고정되는 요소에 적합

섹션별 세부 요약

1. `static`

기본값으로, 정상 문서 흐름을 따름
top, left 등의 오프셋 속성과 z-index가 무시됨
예시: .static-box { position: static; } → 정상 흐름에 따라 배치

2. `relative`

원래 위치에서 오프셋으로 이동 가능(공간은 유지)
absolute 요소의 참조 기준이 되는 컨테이너로 활용
예시: .relative-box { top: 30px; left: 30px; } → 시각적 이동만 발생

3. `absolute`

정상 흐름에서 제거, 가장 가까운 position이 static이 아닌 조상 요소를 기준으로 위치
예시: .card { position: relative; } → .badge { position: absolute; } → .card 내부에 고정

4. `fixed`

브라우저 뷰포트를 기준으로 고정, 스크롤 시 위치 변화 없음
예시: .fixed-header { position: fixed; top: 0; left: 0; } → 상단 고정 헤더

5. `sticky`

스크롤 시 top/bottom 기준으로 부모 컨테이너 내부에서 고정
예시: .sticky-title { position: sticky; top: 0; } → 섹션 제목 고정

6. 요약 비교표

|----------|----------------|------------|----------------|

| static | ✔️ | N/A | 기본값 |

| fixed | ✖️ | 뷰포트 | 고정 헤더/푸터 |

결론

CSS position 속성은 웹 레이아웃 제어의 핵심 도구로, relative와 absolute의 조합을 통해 정교한 오버레이 레이아웃을 구현할 수 있다. fixed는 고정 요소에, sticky는 스크롤 시 섹션 제목 고정에 적합하다. 실무에서는 position: relative를 absolute 자식 요소의 참조 기준으로 설정하는 패턴을 자주 활용해야 한다.