- 복잡하게 얽힌 z-index 문제를 보다 쉽게 해결할 수 있습니다.

---

마이크로소프트 Edge 브라우저에서는 3D 뷰로 DOM을 볼 수 있다는 사실, 알고 계셨나요? 보통 Chrome이나 Safari를 많이 쓰다 보니, 이 기능이 있는지 잘 모르고 계시는 분이 많을 것 같습니다.

이 기능이 빛을 발할 때는 바로 복잡하게 얽힌 z-index 문제를 해결하는 상황입니다. 특정 엘리먼트에서 아무리 z-index를 높게 줘도 보이지 않는 경우가 생기곤 하는데요. 어디에서부터 쌓임 맥락(Stacking Context)가 꼬인 건지 풀려면 막막하죠. 이때 DOM을 3D로 회전시키면서 각 요소 간의 구성 관계를 쉽게 파악할 수 있습니다.

저도 자주 쓰진 않지만, 종종 디버깅을 할 때 유용하게 쓰고 있습니다. CSS 3D transform 스타일이 입혀진 엘리먼트도 실제로 회전되는 건가... 궁금해서 실험해봤는데 아쉽게도 평면에 사상된(mapped) 형태로만 나오더라구요. 즉 지금 제공되는 3D 뷰로는 요소 간 z-index 관계만 파악이 가능합니다.

참고로 Edge라고 해서 Mac에서 못 쓰는 거 아니에요! Edge는 Chromium 브라우저라서 Mac OS 용도 제공됩니다.

https://learn.microsoft.com/en-us/microsoft-edge/devtools-guide-chromium/3d-view/