CSS에서 z-index가 예상대로 동작하지 않는 대표적인 원인은?

보통 MDN Web Docs

보기 및 정답

A 요소에 position 속성(relative, absolute, fixed 등)이 설정되지 않았거나, 새로운 쌓임 맥락(stacking context)이 형성되었다

B position: absolute 요소의 width를 100%로 설정하면 뷰포트 전체 너비가 아닌 가장 가까운 위치 지정 조상 요소의 padding 영역을 기준으로 계산된다

C position: absolute 요소는 위치 기준이 되는 조상 요소가 없으면 브라우저 뷰포트가 아닌 body 요소의 콘텐츠 영역을 기준으로 배치된다

D position: relative는 요소를 원래 위치에서 이동시키면서 동시에 문서 흐름에서 완전히 제거하여 다른 요소의 배치에 영향을 준다

해설

z-index는 position이 static이 아닌 요소(relative, absolute, fixed, sticky)에서만 동작합니다. 또한 opacity, transform, filter 등이 적용된 요소는 새로운 쌓임 맥락을 형성하여, 내부 요소의 z-index가 외부 요소와 독립적으로 적용됩니다.

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

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

정규반 살펴보기

로그인

추가 정보 입력

회원가입

비밀번호 찾기

CSS에서 z-index가 예상대로 동작하지 않는 대표적인 원인은?

해설

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

관련 문제

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