CSS에서 position: sticky 요소가 고정되지 않는 흔한 원인으로 올바른 것은?

Q: CSS에서 position: sticky 요소가 고정되지 않는 흔한 원인으로 올바른 것은?

조상 요소 중 하나에 overflow: hidden이나 overflow: auto가 설정되어 있다 position: sticky는 스크롤 컨테이너 내에서 동작하는데, 조상 요소에 overflow: hidden, auto, scroll이 설정되어 있으면 그 요소가 스크롤 컨테이너가 되어 의도한 대로 고정되지 않을 수 있습니다. 또한 top, bottom 등의 임곗값을 반드시 지정해야 하며, 부모의 높이가 요소와 같으면 고정 효과가 없습니다.

어려움 MDN Web Docs

보기 및 정답

A 조상 요소 중 하나에 overflow: hidden이나 overflow: auto가 설정되어 있다

B z-index 값이 높은 요소가 항상 다른 쌓임 맥락의 요소보다 위에 표시되며 쌓임 맥락 경계는 무시된다

C position: absolute를 적용하면 항상 가장 가까운 부모 요소가 기준이 된다

D position: relative 요소의 자식은 항상 부모의 경계 내에서만 배치된다

해설

position: sticky는 스크롤 컨테이너 내에서 동작하는데, 조상 요소에 overflow: hidden, auto, scroll이 설정되어 있으면 그 요소가 스크롤 컨테이너가 되어 의도한 대로 고정되지 않을 수 있습니다. 또한 top, bottom 등의 임곗값을 반드시 지정해야 하며, 부모의 높이가 요소와 같으면 고정 효과가 없습니다.

코딩, 제대로 배우고 싶다면?

개념 확인은 퀴즈로, 실력은 실전 프로젝트로.
투더제이 코딩클래스에서 시작하세요.

정규반 살펴보기

CSS에서 position: sticky 요소가 고정되지 않는 흔한 원인으로 올바른 것은?

해설

코딩, 제대로 배우고 싶다면?

관련 문제

시장과 사람의 답을 봤다면,다음 결과물의 구조를 고릅니다.

시장과 사람의 답을 봤다면,
다음 결과물의 구조를 고릅니다.