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

Question

김영삼 · Accepted Answer

sticky가 안 되는 가장 흔한 원인은 부모 요소에 overflow: hidden 또는 overflow: auto가 설정된 경우입니다./* 이러면 sticky 안 됨 */
.parent {
  overflow: hidden;  /* ← 이것 때문! */
}
.sidebar { position: sticky; top: 80px; }

/* 해결: overflow 제거하거나 visible로 */
.parent {
  overflow: visible;  /* 또는 overflow 속성 자체를 제거 */
}DevTools에서 부모 요소를 하나씩 올라가면서 overflow 속성을 확인해보세요. 조상 요소 중 하나에 있을 겁니다.

코딩하는민수 · Answer

정리가 너무 깔끔해요. 북마크했습니다. 감사합니다!

댓글 0