position 속성 완전 정복 – static, relative, absolute, fixed, sticky 차이점 쉽게 정리하기

 

 

CSS에서 레이아웃을 만들다 보면 "이 요소 왜 여기 있어?", "왜 고정이 안 되지?" 같은 혼란이 생기죠.
그 핵심 원인은 바로 position 속성을 정확히 이해하지 못해서입니다.

이번 포스팅에서는 CSS position 속성의 5가지 값인
static, relative, absolute, fixed, sticky를 실제 예제와 함께 정리해드립니다.

---

 

✅ position: static (기본값)

모든 요소는 기본적으로 position: static입니다.
별도로 좌표를 지정해도 무시되며, HTML의 문서 흐름에 따라 배치됩니다.

div {
  position: static;
  top: 20px; /* ❌ 적용되지 않음 */
}

 

---

 

✅ position: relative

기존 위치(문서 흐름)를 기준으로 상대적으로 이동합니다.
원래 자리 자체는 공간을 그대로 차지합니다.

div {
  position: relative;
  top: 20px; /* 아래로 20px 이동 */
}

• 원래 위치가 기준
• z-index 조절 가능
• 부모 역할도 가능 (→ absolute 자식의 기준점이 됨)

---

 

✅ position: absolute

가장 가까운 position이 설정된 조상 요소를 기준으로 위치가 결정됩니다.
해당 요소는 문서 흐름에서 빠짐 → 공간을 차지하지 않음.

div {
  position: absolute;
  top: 0;
  right: 0;
}

• 부모 요소에 position: relative 설정하면 기준점이 거기로 설정됨
• z-index를 통한 레이어 겹침 처리에 유리

---

 

✅ position: fixed

브라우저 뷰포트를 기준으로 고정됩니다.
스크롤을 해도 위치가 바뀌지 않음.

div {
  position: fixed;
  bottom: 20px;
  right: 20px;
}

• 대표 사례: “Top으로 가기” 버튼, 고정 네비게이션 바

---

 

✅ position: sticky

스크롤 위치에 따라 relative와 fixed가 동적으로 전환되는 하이브리드 포지션입니다.
부모 영역을 벗어나면 고정되지 않습니다.

div {
  position: sticky;
  top: 0;
}

• 상단 고정 헤더, 섹션별 제목 고정 등에 많이 사용

---

 

✅ 정리표 – position 5종 비교

속성	기준 위치	문서 흐름 영향	특징
static	없음 (기본)	포함됨	top/right 등 무시됨
relative	자기 위치 기준	포함됨	레이아웃 틀은 유지
absolute	조상 요소 기준	제외됨	겹치기 좋음
fixed	브라우저 창 기준	제외됨	항상 화면 고정
sticky	스크롤 위치 기준	포함됨	조건부 고정