Top Layer(최상위 레이어)는 엘리먼트의 순서있는 집합으로, 브라우저 뷰포트에서 관련 document 위에 존재한다. 각 document는 하나의 연관된 최상위 레이어를 갖는다. 최상위 레이어의 요소는 z-index나 DOM 계층에 대해 걱정할 필요가 없다. 또한, 해당 요소들은 ::backdrop 의사-엘리먼트를 갖는다.
최상위 레이어의 요소는 그 집합에 나타나는 순서대로 쌓인다. 가장 마지막으로 나타난 항목이 맨 위에 나타난다. 즉, 최상위 레이어 내 요소 간 z-index는 의미가 없다. 따라서 요소의 순서를 변경하려면 삭제 후 다시 추가해야 한다.
::backdrop은 그것과 관련된 요소의 바로 밑에 그려진다. 즉, 이전의 요소들보다는 위에 그려진다.
최상위 레이어가 없었을 때는, <body> 맨 마지막에 빈 컨테이너 요소를 두고 z-index값을 매우 크게 설정하여 최상위 레이어인 것처럼 흉내 내곤 했다. 여러 라이브러리에서 볼 수 있는 구현이다. <dialog>나 Pop-up같은 빌트인 컴포넌트 및 API에서는 요소가 최상위 레이어로 승격되므로 이런 불편한 꼼수가 필요 없다.
최상위 레이어를 사용하면, 승격된 요소는 당신이 소스코드에 작성한 그 위치에 그대로 존재한다. 따라서 승격된 요소와 이를 트리거한 요소 등 모든 요소를 쉽게 검사할 수 있으며 접근성 측면에서도 이점이 있다.
크롬 개발자 도구에서도 최상위 레이어를 지원한다. 이를 통해 어떤 요소들이 최상위 레이어에 어떤 순서로 그려지는지 파악하기 쉽다.
참고
https://developer.chrome.com/blog/what-is-the-top-layer/
Meet the top layer: a solution to z-index:10000 - Chrome Developers
With new built-in components and APIs coming to the platform, what is this "Top layer" that they enable us to use?
developer.chrome.com
https://developer.chrome.com/blog/top-layer-devtools/
Top layer support in Chrome DevTools - Chrome Developers
Discover the top layer and learn how Chrome DevTools implemented support for it.
developer.chrome.com
https://developer.chrome.com/docs/devtools/elements/badges/#top-layer
Badges reference - Chrome Developers
Toggle various overlays and speed up DOM tree navigation with badges.
developer.chrome.com
https://fullscreen.spec.whatwg.org/#new-stacking-layer
Fullscreen API Standard
Abstract The Fullscreen API standard defines an API for elements to display themselves fullscreen. Table of Contents 1 Terminology 2 Model 3 API 4 UI 5 Rendering 5.1 New stacking layer 5.2 ::backdrop pseudo-element 5.3 :fullscreen pseudo-class 5.4 User-age
fullscreen.spec.whatwg.org
