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 요소가 고정되지 않는 흔한 원인으로 올바른 것은?

해설

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

관련 문제

모두를 위한 진짜 쎈 바이브코딩