퀴즈 / CSS / 문제

CSS position: sticky의 동작 방식은?

쉬움 MDN Web Docs
보기 및 정답
A 평소에는 relative처럼 동작하다가, 스크롤 시 지정한 위치에 도달하면 fixed처럼 화면에 고정된다
B z-index 값이 높은 요소가 항상 다른 쌓임 맥락의 요소보다 위에 표시되며 쌓임 맥락 경계는 무시된다
C position: fixed 요소는 스크롤할 때 뷰포트가 아닌 최상위 부모 요소를 기준으로 위치가 고정되어 이동한다
D position: absolute를 적용하면 항상 가장 가까운 부모 요소가 기준이 된다

해설

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

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

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

정규반 살펴보기

관련 문제

CSS scroll-snap 관련 속성들의 역할은?
CSS
CSS 속성 image-rendering의 값 중 'pixelated'의 효과는?
CSS
CSS Flexbox에서 flex-wrap: wrap의 역할은?
CSS
CSS word-break와 overflow-wrap(word-wrap)의 차이점으로 올바른 것은?
CSS
CSS text-underline-offset 속성의 역할은?
CSS
START THE LOOP · CHOOSE

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

한 번의 결과에 기대지 않고 다시 만들 수 있도록, 문제 발견부터 제작·배포·수익화까지 이어지는 전체 흐름을 익혀보세요.

TTJ CLASS에서 다음 구조 고르기 →
처리 중...