[에러] style z-index 에러

상황: 메인페이지 뷰단에서 표출하는 2개의 팝업창 중 z-index값이 상대적으로 높게 설정되어 있는 팝업창이 z-index값이 낮은 창 뒤에 가려져 보이지 않는 에러가 발생하였다.

 

1. position 속성을 보니 2개의 창 모두 position:absolute로 설정이 되어있었다.

2. position이 둘 다 absolute인 경우 부모관계가 같지 않은 이상, 상호간에 연관관계를 이용한 비교가 어렵다.

<노드 예시1>

<노드 예시1>을 보면 1,3 번이 부모-자식 관계를, 2,4번이 부모-자식 관계를 각각 맺고 있다. 3,4번에 각각 z-index 값을 준다고 할 때, 1번은 2번의 상위 노드이므로 상호간 연관관계가 성립되지 않을 수 있다.

 

3. 핸들바 양식으로 작성된 코드라 개발자 도구에서 코드를 보기가 어려워, 직접 뷰 파일에서 해당 팝업들의 부모 요소를 찾아본 결과 서로 다른 부모-자식 관계를 지니고 있었다. 

 

4. 템플릿 위치를 수정하여 다시 확인해보니 제대로 작동됨을 확인할 수 있었다.