CSS · 스타일

CSS z-index가 안 먹힐 때 해결 방법

z-index에 큰 값을 줘도 요소가 위로 안 올라옴

#CSS#z-index#position#쌓임맥락

증상

z-index: 9999를 줬는데도 요소가 다른 요소 뒤에 가려집니다.

z-index는 position이 static이 아닐 때만 동작합니다(static이 기본값). position이 없으면 z-index는 무시됩니다.

/* ✕ position이 없어 z-index 무시 */
.box { z-index: 10; }

/* ○ */
.box { position: relative; z-index: 10; }

(flex/grid 아이템은 예외적으로 position 없이도 z-index가 동작합니다.)

부모가 새 쌓임 맥락을 만들면, 자식의 z-index는 그 부모 범위 안에서만 비교됩니다. 부모를 넘어 다른 요소 위로 못 올라갑니다.

쌓임 맥락을 만드는 대표 속성: position + z-index, opacity < 1, transform, filter, will-change.

/* 이 부모는 opacity 때문에 쌓임 맥락을 만든다 */
.parent { opacity: 0.9; }
/* → .parent 내부 자식의 z-index:9999도 .parent 밖 요소는 못 넘는다 */

/* 1) position 부여 */
.modal { position: fixed; z-index: 1000; }

/* 2) 부모의 쌓임 맥락 유발 속성 점검 */
/* 의도치 않은 transform/opacity/filter가 부모에 있는지 확인 */

점검 순서: ① 대상에 position이 있는가 → ② 부모 중 transform/opacity/filter로 쌓임 맥락을 만든 요소가 있는가. 큰 숫자를 더 키우는 건 보통 해결책이 아닙니다.