[CSS] position: sticky란?

position: sticky는 static과 fixed의 성질을 동시에 가진 위치 속성이다.

 

1. 기본 상태는 static — 자리부터 차지한다

.box {
  position: sticky;
  top: 70px;
}

• 처음에는 static처럼 동작
• 문서 흐름 안에 있으며 자리를 차지한다
• 아직은 화면에 달라붙지 않는다

 

2. 스크롤 임계점에 도달하면 fixed처럼 변한다

스크롤을 내려서  요소의 상단이 top: 70px 위치에 도달하는 순간

• sticky 요소는 fixed처럼 화면에 달라붙는다
• 지정한 위치(70px)를 절대 넘어가지 않는다

“스크롤이 닿는 순간 fixed로 변경된다”는 표현이 정확하다

 

3. 하지만 fixed와 결정적으로 다른 점

position: sticky에는 절대적인 제약이 하나 있다.

❗ 부모 요소 영역을 벗어나지 못한다

 

• 부모 컨테이너의 끝에 도달하면
• 더 이상 화면에 붙어 있지 않고
• 부모와 함께 자연스럽게 사라진다

이 제약 때문에 fixed처럼 항상 떠 있는 요소는 아니다

 

4. 정리하면

• sticky는 처음엔 static
• 스크롤 임계점에서 fixed처럼 동작
• 부모 요소 안에서만 고정
• 네비게이션, 섹션 헤더에 최