본문 바로가기
Q&A해결2025년 3월 8일1분 읽기

CSS에서 position sticky가 작동하지 않는 이유 — 부모 overflow 문제

코
코딩하는민수
조회 542댓글 2

사이드바를 sticky로 만들려는데 스크롤해도 따라오지 않습니다.

.sidebar { position: sticky; top: 80px; }

다른 페이지에서는 잘 되는데 이 페이지에서만 안 됩니다.

댓글 2

김김영삼1년 전

sticky가 안 되는 가장 흔한 원인은 부모 요소에 overflow: hidden 또는 overflow: auto가 설정된 경우입니다.

/* 이러면 sticky 안 됨 */
.parent {
overflow: hidden; /* ← 이것 때문! */
}
.sidebar { position: sticky; top: 80px; }

/* 해결: overflow 제거하거나 visible로 */
.parent {
overflow: visible; /* 또는 overflow 속성 자체를 제거 */
}

DevTools에서 부모 요소를 하나씩 올라가면서 overflow 속성을 확인해보세요. 조상 요소 중 하나에 있을 겁니다.

코코딩하는민수1년 전
정리가 너무 깔끔해요. 북마크했습니다. 감사합니다!
Ctrl+Enter로 등록