상단 레이어는 브라우저 표시 영역에서 관련된 document 위에 위치하며, 각 document에는 연결된 상단 레이어가 하나씩 있습니다. 즉, 최상위 레이어로 승격된 요소는 z-index 또는 DOM 계층 구조를 신경 쓸 필요가 없습니다. 또한 사용해 볼 수 있는 깔끔한 ::backdrop 유사 요소도 제공됩니다. Fullscreen은 dialog 지원이 도입되기 전에 사용된 최상위 레이어의 좋은 예였으므로 Fullscreen API 사양에서 자세한 내용을 살펴볼 수 있습니다.
상단 레이어는 document의 나머지 부분 위에 콘텐츠를 렌더링하는 문제를 해결하는 데 도움이 됩니다.
기억해야 할 중요 사항:
- 상단 레이어는 document 흐름 외부에 있습니다.
- z-index는 최상위 레이어에 영향을 미치지 않습니다.
- 상단 레이어의 각 요소에는 스타일을 지정할 수 있는 ::backdrop 유사 요소가 있습니다.
- 각 요소와 ::backdrop가 새 스택 컨텍스트를 생성합니다.
- 맨 위 레이어의 요소는 세트에 나타나는 순서대로 쌓입니다. 마지막 항목이 맨 위에 표시됩니다. 요소를 승격하려면 삭제한 후 다시 추가합니다.
지금까지 상단 레이어를 어떻게 모방했나요? 개발자가 body 끝에 빈 컨테이너 요소를 드롭하는 것은 드문 일이 아닙니다. 그런 다음 이 레이어가 '가짜' 상단 레이어로 사용됩니다. 이 컨테이너는 스택의 다른 모든 항목 위에 배치됩니다. 특정 항목을 다른 항목보다 우선적으로 승격하려면 해당 컨테이너에 추가합니다. SweetAlert, reactjs-popup, Magnific Popup 등의 인기 패키지에서 이를 확인할 수 있습니다.
새로운 기본 제공 구성요소와 API(예: <dialog> 및 'Popover')를 사용하면 이러한 해결 방법을 사용하지 않아도 됩니다. 최상위 레이어로 콘텐츠를 승격할 수 있습니다.
UI 프레임워크를 사용하면 승격된 요소를 상응하는 구성요소와 같은 위치에 배치할 수 있습니다. 그러나 렌더링에서는 DOM에서 분리되는 경우가 많습니다.
상단 레이어를 사용하면 승격된 요소가 소스 코드에서 배치되는 위치 (예: <dialog>)가 됩니다. DOM에서 레이어가 몇 개 아래에 있는지는 중요하지 않습니다. 최상위 레이어로 승격되며 원하는 위치에서 구성요소 HTML과 함께 배치하여 검사할 수 있습니다. 이렇게 하면 더 쉽게 DOM에서 트리거 요소와 승격된 요소를 동시에 검사할 수 있습니다. 특히 트리거 요소가 속성을 업데이트하는 경우에 유용합니다. 또한 이제 요소가 같은 위치에 배치되므로 접근성 측면에서 추가적인 이점이 있습니다.
최상위 레이어와 높은 z-index를 비교하려면 이 데모를 살펴보세요.
이 데모에서는 SweetAlert 팝업을 열고 최상위 레이어 <dialog>를 열 수도 있습니다. <dialog>를 열고 SweetAlert 팝업을 열어봅니다. 최상위 레이어 요소 아래에 나타납니다. SweetAlert 팝업의 루트는 position: fixed와 함께 10000의 z-index를 사용합니다.
.swal-overlay {
z-index: 10000;
position: fixed;
}
<dialog>에 스타일을 적용하지 않아도 다른 모든 콘텐츠 위에 표시됩니다.
DevTools
이렇게 해서 DevTools 지원 단계로 이동합니다. Chrome DevTools는 사용자가 상단 레이어를 검사할 수 있도록 최상위 레이어 요소에 대한 지원을 추가하고 있습니다. 이렇게 하면 디버그하기가 더 쉬워지고 최상위 레이어에 스택이 쌓이고 있는 방식이나 최상위 레이어에 있는 항목이 어떻게 쌓이고 있는지 시각화할 수 있습니다.
Alina Varkki는 이러한 도구를 사용하는 방법을 자세히 설명하는 유용한 도움말을 제공합니다. 현재 Chrome Canary 버전 105에서 미리보기 기능으로 제공됩니다.
간단하죠?
상단 레이어에 대한 간략한 소개 다음과 같은 항목에 '안녕!'이라고 말할 수 있습니다.
.popup-container {
z-index: 10000;
}
상단 레이어로 무엇을 푸시해야 할까요? dialog을(를) 사용해 보셨나요? 아니면 OpenUI Popover API를 확인해 보셨나요? Google에 알려주세요.