배경에 이미지가 있는 화면에서 모달로 알림창을 만들었다. 예상대로라면 알림창이 페이지 최상단에 배치되어야 한다. 그러나 배경에 있는 이미지가 일부는 모달로 된 알림창의 아래에 위치하고 일부는 알림창의 위에 위치했다. 알림창의 일부가 가려지는 현상을 해결하기 위해 검색하던 도중 z-index를 사용하면 이미지의 순서를 정해줄 수 있다는 것을 알게되었다. 이미지와 모달 모두 position 속성을 사용한게 원인이었다.
해결방법 : 가장 앞에 놓고 싶은 이미지를 큰 인덱스로 설정한다.
배경에 있는 이미지는 z-index:1, 모달로된 알림창은 z-index: 2
web