position – static, relative, absolute, fixed, sticky 차이 쉽게 이해하기

 

 

CSS에서 레이아웃을 잡을 때 가장 많이 쓰는 속성이 바로 position입니다.
하지만 static, relative, absolute, fixed, sticky는
처음에는 헷갈릴 수밖에 없는 개념입니다.

이번 포스팅에서는 각 position의 의미, 차이점, 예제를 통해
초보자도 확실히 이해할 수 있도록 정리해드리겠습니다.

---

✅ position이란?

HTML 요소의 위치를 어떻게 배치할지를 지정하는 속성입니다.
다른 요소들과의 관계, 부모 요소 기준, 스크롤 여부 등에서
레이아웃에 큰 영향을 미칩니다.

---

🔹 1. static – 기본 위치 (기본값)

 

div {
  position: static;
}

• 아무 position도 지정하지 않으면 기본이 static
• top, left, right, bottom 속성이 무시됨
• 문서 흐름에 따라 배치

💡 기본값이라 명시할 필요 없음

---

🔹 2. relative – 자기 자신을 기준으로 이동

 

div {
  position: relative;
  top: 10px;
  left: 20px;
}

• 원래 자리에서 상대적으로 이동
• 공간은 그대로 유지됨
• 기준이 자기 자신

💡 툴팁, 배지 위치 조정 등에 자주 사용

---

🔹 3. absolute – 가장 가까운 relative 부모 기준

 

.parent {
  position: relative;
}

.child {
  position: absolute;
  top: 0;
  left: 0;
}

• 가장 가까운 relative 또는 absolute 부모 기준으로 위치 지정
• 부모 기준으로 완전히 제어 가능
• 문서 흐름에서 제거됨 (공간 차지 X)

💡 드롭다운, 모달, 레이어 UI 구현 시 필수

---

🔹 4. fixed – 화면(Viewport)을 기준으로 고정

 

.fixed {
  position: fixed;
  top: 0;
  left: 0;
}

• 브라우저 화면 기준으로 고정
• 스크롤해도 위치 변하지 않음

💡 상단 고정 메뉴, 플로팅 버튼에 자주 사용

---

🔹 5. sticky – 스크롤에 따라 relative → fixed 전환

 

.sticky {
  position: sticky;
  top: 0;
}

• 처음에는 relative처럼 있다가
• 스크롤이 top 값에 도달하면 fixed처럼 동작
• 스크롤 기준 고정 효과 구현 가능

💡 섹션 메뉴, 고정 탭 등에 사용

---

🧪 position 예제 비교

position	기준점	스크롤 영향	레이아웃 흐름
static	없음 (기본 위치)	따라감	O
relative	자기 자신	따라감	O
absolute	가장 가까운 position 설정된 부모	따라감	X
fixed	브라우저 창	X (고정)	X
sticky	스크롤 기준 요소	조건부 고정	O

 

---

✅ 실무 활용 팁

• absolute를 쓰려면 부모 요소에 position: relative 필수
• fixed는 너무 많이 쓰면 UX 저하 가능 → 사용 위치 주의
• sticky는 IE에서 미지원, 대부분 브라우저는 지원됨
• 모달/툴팁/드롭다운 메뉴 등은 보통 absolute + relative 조합