[2024 중앙 해커톤] opacity부여 후 z-index 버그

2024 / 07 / 28

9월 다 돼서 정리해보는 글.

 

이 때 대회 임박했을때라 블로그고 뭐고 하루종일 작업만 해서 정리할수가 없었다. (대회가 8/6이었음)

그래도 몇 가지 메모해둔것을 바탕으로 핵심 내용들 마저 올려보도록 하겠다.

앞으로 올리는 게시글에는 날짜가 안적힐 가능성이 크다. 언제 작업한 내용인지 기억이 잘 안나기 때문이다.

 

아무튼 본론 시작.

---

이 날 작업하다가 기묘한 버그를 발견하게 되었다.

그것은 바로 opacity 부여시 z-index 버그가 발생한다는 것..

 

예를 들어 설명하자면, 이런 상황이다.

나의 상황은 다음과 같았다.

"추구하는 삶" 팝업창 뒷배경으로 투명도가 부여된 div를 만들었더니, 이 div보다 더 뒤에 있어야 할 "퇴근의 정석" div가 위로 올라왔다.

 

처음에는 뭔지도 모르고 하얗게 된 저 부분을 누르니 메인페이지로 이동하길래 뭐가 문제인지에 대해 한참 고민했는데 알고보니 z-index 버그였다는 사실.. (footer의 로고 부분에 메인페이지로 이동하도록 링크를 걸어두어서 이 부분을 누르면 메인으로 이동함)

 

다음의 블로그를 참고하여 해결할 수 있었다.

https://abcdqbbq.tistory.com/84

[css 응용] z-index 버그 (opacity, transform과 함께 사용시)

원인은 겹쳐있는 div가 있을 때 (뒤에 있는 div를 div1, 앞에 있는 div를 div2라 하겠다)

div2에 opacity를 주면 div2의 z-index가 0으로 임의지정되어 뒤에 있는 div1이 앞으로 튀어나온다는 것이다.

 

따라서 해결하기 위해서는 부모-자식 및 형제 요소를 고려해 z-index 값을 잘 조정해주면 된다.

코드를 잘 뜯어보며 z-index를 부여하다보면 해결될것이다.

 

아무튼 구글링 + GPT가 있다면 무적이니 잘 해결해보시길..