CSS position: sticky의 동작 방식은?

Q: CSS position: sticky의 동작 방식은?

평소에는 relative처럼 동작하다가, 스크롤 시 지정한 위치에 도달하면 fixed처럼 화면에 고정된다 position: sticky는 relative와 fixed의 하이브리드입니다. 스크롤 시 top, bottom 등으로 지정한 임계점에 도달하면 해당 위치에 고정됩니다. 스크롤 시 따라다니는 내비게이션 바나 테이블 헤더 고정에 자주 사용됩니다.

쉬움 MDN Web Docs

보기 및 정답

A 평소에는 relative처럼 동작하다가, 스크롤 시 지정한 위치에 도달하면 fixed처럼 화면에 고정된다

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

C position: fixed 요소는 스크롤할 때 뷰포트가 아닌 최상위 부모 요소를 기준으로 위치가 고정되어 이동한다

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

해설

position: sticky는 relative와 fixed의 하이브리드입니다. 스크롤 시 top, bottom 등으로 지정한 임계점에 도달하면 해당 위치에 고정됩니다. 스크롤 시 따라다니는 내비게이션 바나 테이블 헤더 고정에 자주 사용됩니다.

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

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

정규반 살펴보기

로그인

추가 정보 입력

회원가입

비밀번호 찾기

CSS position: sticky의 동작 방식은?

해설

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

관련 문제

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