🐜 모달: 모달 창에 z-index 적용이 안되는 경우

기본적으로 z-index가 안먹는 경우 4가지 상황을 고려해 봐야 한다고 한다.

1. 동일한 스택 컨텍스는 모양 순서대로 표시되며, 후자의 요소는 이전 요소 위에 표시된다.
   즉 제일 뒤에 선언된 요소가 제일 상단에 쌓인다.

2. position이 세팅되지 않으면 z-index가 적용되지 않는다.
   즉 z-index 준 요소에는 position도 함께 줘야 한다.

3. opacity, transform 같은 몇몇 속성의 경우 제일 상단에 쌓인다.

4. 부모 요소의 z-index 가 낮은 경우 자식 요소의 z-index가 높더라도 다른 요소랑 비교했을 때 더 낮게 쌓인다.
   즉, 뭔가 이상하다 싶으면 부모 요소 z-index를 확인해 보란 말이다.

그렇다면 나의 경우는?

현재 왼쪽 헤더 내부에 작성된 로그아웃 모달창의 경우, z-index를 어마무시하게 줬는데도 불구하고 메인 박스 안의 있는 체크한 저 몇몇 요소를 커버하지 못하고 있다.

이때 부모 태그인 header로 가보니 z-index 값이 메인 박스 안에 있는 체크된 요소의 z-index 값 보다 낮은 값으로 되어 있었다.
이 문제는 4번의 경우에 해당되는 것 같다!

.header{
  z-index: 3;
  position: relative;
  }

부모 태그인 header의 z-index 값을 좀 더 높여 줬더니 다음과 같이 모달 창이 떴을 때, 모달창이 화면 전체를 커버할 수 있게 되었다.

물론~~~ 네비에 저렇게 모달 달아도 되는지 안되는지 잘 모르겠지만...일단은...주먹구구로라도 만들어 놓고 클린 코드 하든지 말든지 하자 ^_ㅠ...화이띵

📚 참고 블로그