CSS position: sticky 제대로 이해하기 (왜 고정이 안 될까?)

 

👽

여태 브라우저의 헤더나 하단 바를 만들 때는 보통 position: fixed를 사용해왔다.

그런데 무신사나 지그재그 웹 브라우저처럼 레이아웃이 모바일 사이즈(max-width)로 고정된 구조에서는

fixed를 사용하면 요소가 max-width로 제한된 레이아웃을 벗어나 좌우 바깥으로 튀어나오는 현상이 생긴다.

( fixed는 뷰포트 기준으로 고정되기 때문 )

지그재그 웹을 살펴보니 헤더에 position: sticky가 사용되고 있었다.

그래서 같은 방식으로 sticky를 적용해봤지만 고정이 안 됐다.

같은 sticky 속성을 사용했는데 왜 고정이 안 될까?

원인을 찾는 과정에서 별거 아닌 내용일 수도 있지만 작은 CSS 동작 원리를 하나 새롭게 알게 되어 정리해본다.

 

 

결론)

position: sticky는

✔ top, left 등 기준값 필수
✔ 부모 요소에 overflow 사용 X

---

1. position: sticky란?

position: sticky는 relative와 fixed의 중간 개념

• 기본 상태에서는 일반 문서 흐름(relative)처럼 동작
• 스크롤이 특정 위치에 도달하면 고정(fixed)처럼 동작

즉, 스크롤 위치에 따라 동적으로 고정되는 포지션이다.

 

기본 사용 예시

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

동작 방식:

1. 처음에는 일반 요소처럼 배치
2. 스크롤해서 요소가 top: 0 위치에 도달하면
3. 해당 위치에 붙어서 고정

💡 따라서 top, left, right 등의 기준값을 함께 작성해야함!

 

 

2. sticky와 fixed의 차이

속성특징

position: fixed	화면(Viewport) 기준으로 항상 고정
position: sticky	부모 영역 내부에서만 고정

예를 들어 사이드바에 sticky를 사용하면

• 스크롤할 때 따라 내려오다가
• 부모 영역 끝에 도달하면 멈춘다.

 

3. position: sticky가 동작하지 않는 대표적인 이유

1️⃣ top, left 등의 기준 값이 없음

sticky는 기준 위치가 반드시 필요하다.

 

 

top, bottom, left, right 중 하나는 반드시 지정해야 한다.

 

2️⃣ 부모 요소에 overflow 속성이 있음

나는 부모 요소의 overflow 때문에 

 

3️⃣ Flex / Grid 레이아웃 환경 문제

flex 컨테이너 안에서 sticky가 제대로 작동하지 않는 경우도 있다.

이 경우 다음 속성을 추가해 해결한다.

.sticky-element {
  align-self: flex-start;
}