모달창이 왜 안 뜰까? CSS position과 z-index 문제 해결기

오늘 모달창을 만드는데 난관에 부딪혔다...

문제 상황

모달창을 만드는데 원하는 대로 CSS가 작동하지 않아 오랫동안 헤맸다. 모달창이 다른 div 요소보다 위에 떠야 했는데 자꾸 div 요소 아래로 추가되는 문제가 발생했다. 아무리 z-index 값을 넣어봐도 상황은 바뀌지 않았다.

모달창이 movies 섹션 위에 겹쳐서 나타나야 하는데 계속 다른 요소들보다 아래에 뜬다.

문제 코드

main {
  position: absolute;
}

.movies {
  width: 90%;
  display: flex;
  flex-wrap: wrap;
  z-index: 1;
}

.modal {
  background-color: red;
  width: 700px;
  margin: 0 auto;
  z-index: 2;
}

원인 추론

1. CSS 선택자 문제
   혹시 잘못된 CSS 선택자를 입력한 것은 아닐까? div 요소가 여러 개 겹쳐 있어서 내가 잘못된 선택자를 설정했을 가능성을 의심했다.

2. position 문제
   z-index 값을 활용하려면 반드시 position이 설정해야 한다는 걸 알고 있었는데 혹시 modal에 position 값을 지정하지 않은 게 문제일까 싶었다.

3. 계층 구조 문제
   .modal과 .movies가 각각 main의 직계 자식 요소가 아니어서 문제가 생겼을 가능성도 생각했다. z-index는 같은 스택 컨텍스트 안에서만 적용되기 때문이다.

4. 다른 CSS 간섭
   다른 CSS 스타일이 의도치 않게 영향을 끼쳤을 가능성도 있었다. 이전에도 비슷한 상황을 겪었던 적이 있어서 이 부분도 확인해보기로 했다.

해결 방안

문제는 modal의 position과 위치 설정이었다. 이를 해결하기 위해 다음과 같은 수정 사항을 적용했다.

1. modal의 position을 fixed로 설정.
2. main의 position 값을 relative로 변경.
3. 튜터님의 조언대로 modal에 top: 0;을 추가.

수정하니 모달창이 의도한 대로 화면 가운데 정상적으로 뜨기 시작했다. position 값을 변경해도 뜨지 않았다가 위치값을 설정해주니 제대로 작동했다.

main {
  position: relative;
}

.movies {
  width: 90%;
  display: flex;
  flex-wrap: wrap;
  z-index: 1;
}

.modal {
  top: 0;
  background-color: red;
  position: fixed;
  width: 700px;
  margin: 0 auto;
  z-index: 2;
}

느낀점

CSS는 역시 어렵다…
기본적인 개념을 건너뛰고 원하는 부분만 무작위로 수정하려다 보니 문제가 더 꼬인 것 같다. 이번 경험을 통해 느낀 점은 잘 모르는 스타일을 적용하기 전에 공식 문서를 먼저 정독하고 사용법을 숙지해야 한다는 것이다. 앞으로는 더 꼼꼼히 공부하고 문제를 하나씩 차근차근 풀어나가야겠다!!!!!!