퀴즈 / CSS / 문제

CSS에서 z-index 속성이 동작하기 위한 전제 조건은?

보통 MDN Web Docs
보기 및 정답
A position: relative를 적용한 요소는 자식의 absolute 위치 기준이 되지 않으며 별도로 기준 요소를 지정해야 한다
B 요소에 position 값이 static이 아닌 값(relative, absolute, fixed, sticky)으로 지정되어야 한다
C position: sticky 요소는 부모 컨테이너의 overflow 속성에 영향을 받지 않으며 어떤 상황에서든 스크롤 시 항상 고정된다
D position: relative는 요소를 원래 위치에서 이동시키면서 동시에 문서 흐름에서 완전히 제거하여 다른 요소의 배치에 영향을 준다

해설

z-index는 요소의 쌓임 순서를 결정하지만, position이 기본값인 static일 때는 적용되지 않습니다. relative, absolute, fixed, sticky 중 하나가 지정되어야 z-index가 동작합니다. 또한 flex/grid 아이템에서도 z-index가 적용됩니다.

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

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

정규반 살펴보기

관련 문제

CSS position: sticky의 동작 방식은?
CSS
CSS 속성 image-rendering의 값 중 'pixelated'의 효과는?
CSS
CSS :has() 선택자의 역할로 올바른 것은?
CSS
CSS :invalid와 :valid 의사 클래스의 역할은?
CSS
CSS currentColor 키워드의 동작으로 올바른 것은?
CSS
START THE LOOP · CHOOSE

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

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

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