[CSS] Q. z-index가 동작하지 않을 때 어떻게 해야 하나요?

부모의 z-index 레벨을 점검해 본다.

<section class="content">            
  <div class="modal"></div>
</section>
<div class="side-tab"></div>

.content {
  position: relative;
  z-index: 1;
}
.modal {
  position: fixed;
  z-index: 100;
}
.side-tab {
  position: fixed;
  z-index: 5;
}

[원인]

modal의 z-index가 100이라도, 부모인 content의 z-index가 1이면 side-tab은 modal의 위에 배치될수밖에 없다.

이유는 마크업에서 같은 레벨의 부모의 z-index 값이 낮으면 자식의 값도 강제로 값이 낮아지기 때문이다.

(z-index를 100해봐야 content 안에서만 100이라는 의미)

 

[해결 방법 2가지]

• modal을 content 밖으로 뺀다.
• content의 position을 제거해서 modal의 z-index를 제한하지 않게 한다.

---

올라탄 요소에 opacity, transform속성이 있는지 체크해 본다.

z-index가 작동하지 않는 대상에게 아래의 속성을 사용한다.

z-index: 10;
position: relative;

---

[공부 좌표]

z-index가 동작하지않는 이유 4가지 (그리고 고치는 방법)