상단 레이어는 브라우저 표시 영역에서 관련된 document 위에 위치하며, 각 document에는 연결된 상단 레이어가 하나씩 있습니다. 즉, 최상위 레이어로 승격되는 요소는 z-index 또는 DOM 계층 구조에 관해 신경 쓸 필요가 없습니다. 또한 깔끔한 ::backdrop 의사 요소를 가져와서 활용할 수 있습니다. 전체 화면은 dialog 지원이 도입되기 전에 사용 중인 최상위 레이어의 좋은 예였으므로 Fullscreen API 사양은 더 자세히 설명합니다.
최상위 레이어는 document의 나머지 부분 위에 콘텐츠를 렌더링하는 문제를 해결하는 데 도움이 됩니다.
기억해야 할 중요한 사항:
- 상단 레이어는 document 흐름의 외부에 있습니다.
- z-index는 상단 레이어에 효과가 없습니다.
- 상단 레이어의 각 요소에는 스타일을 지정할 수 있는 ::backdrop 의사 요소가 있습니다.
- 각 요소와 ::backdrop는 새로운 스택 컨텍스트를 생성합니다.
- 맨 위 레이어의 요소는 집합에 나타나는 순서대로 스택됩니다. 마지막 항목이 상단에 표시됩니다. 엘리먼트를 승격하려면 삭제한 후 다시 추가합니다.
지금까지 어떻게 최상위 레이어를 모방했나요? 개발자가 body의 끝에 빈 컨테이너 요소를 삭제하는 것은 드문 일이 아닙니다. 그런 다음 '가짜' 문장으로 있습니다. 이 컨테이너는 스택의 다른 모든 항목 위에 배치됩니다. 어떤 것을 무엇보다 홍보하려면 해당 컨테이너에 이를 추가합니다. SweetAlert, reactjs-popup, Magnific Popup 등의 인기 패키지에서 이를 확인할 수 있습니다.
<dialog> 및 '팝오버'와 같은 새로운 내장 구성요소와 API를 사용하면 이러한 해결 방법에 의존할 필요가 없습니다. 콘텐츠를 최상위 레이어로 승격할 수 있습니다.
UI 프레임워크를 사용하면 프로모션된 요소를 구성요소의 상응하는 요소와 같은 위치에 배치할 수 있습니다. 그러나 렌더링 시 DOM에서 분리되는 경우가 많습니다.
상단 레이어를 사용하면 승격된 요소가 소스 코드에 배치됩니다 (예: <dialog>). 요소가 DOM에서 몇 개의 레이어가 아래에 있는지는 중요하지 않습니다. 최상위 레이어로 승격되어 원하는 위치에서 구성요소 HTML과 같은 위치에 배치된 항목을 검사할 수 있습니다. 이렇게 하면 DOM에서 트리거 요소와 프로모션 요소를 동시에 더 쉽게 검사할 수 있습니다. 예를 들어 트리거 요소가 속성을 업데이트할 때 특히 유용합니다. 이렇게 하면 요소가 같은 위치에 배치되므로 접근성 면에서 추가적인 이점이 있습니다.
최상위 레이어와 높은 z-index를 비교하여 보여주려면 이 데모를 생각해 보세요.
이 데모에서는 SweetAlert 팝업을 열고 상단 레이어 <dialog>도 열 수 있습니다. <dialog>를 열고 SweetAlert 팝업을 열어봅니다. 최상위 레이어 요소 아래에 표시됩니다. SweetAlert 팝업의 루트는 position: fixed와 함께 z-index 10000을 사용합니다.
.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에 알려주세요.