Górna warstwa znajduje się nad powiązanymi elementami document w widocznym obszarze przeglądarki, a każda warstwa document ma powiązaną górną warstwę. Oznacza to, że elementy awansowane do górnej warstwy nie muszą się martwić o hierarchię z-index ani DOM. Do zabawy użytkownicy mają też fajny pseudoelement ::backdrop. Specyfikacja pełnoekranowego interfejsu API zawiera więcej szczegółów, ponieważ pełny ekran był świetnym przykładem górnej warstwy używanej przed pojawieniem się pomocy dialog.
Górna warstwa pomaga rozwiązać problem renderowania treści powyżej pozostałej części obszaru document.
Ważne informacje, o których musisz pamiętać:
– Górna warstwa znajduje się poza procesem document.
– z-index nie ma wpływu na górną warstwę.
– Każdy element w górnej warstwie ma pseudoelement ::backdrop, który można stylizować.
– Każdy element i ::backdrop generują nowy kontekst skumulowany.
- Elementy z górnej warstwy są ułożone w kolejność, w jakiej występują w zestawie. Ostatni z nich będzie widoczny u góry. Jeśli chcesz promować jakiś element, usuń go i dodaj ponownie.
W jaki sposób do tej pory naśladowaliśmy górną warstwę? Często zdarza się, że deweloperzy upuszczają pusty element kontenera na końcu funkcji body. Zostanie ona użyta jako „sztuczna” górna warstwa. Kontener ma za zadanie umieścić ten kontener nad wszystkim innym w stosie. Jeśli chcesz promować coś ponad wszystko, możesz dołączyć to do kontenera. Jest to widoczne w popularnych pakietach, takich jak SweetAlert, reactjs-popup, Magnific Popup i innych.
Dzięki nowym wbudowanym komponentom i interfejsom API, takim jak <dialog> czy „Popover”, nie musisz stosować tych rozwiązań. Możesz promować treści na górną warstwę.
Platformy interfejsu użytkownika pozwalają nam na zlokalizowanie promowanych elementów razem z ich odpowiednikami. Jednak często są one rozdzielone w DOM podczas renderowania.
Gdy używasz górnej warstwy, promowane elementy znajdują się tam, gdzie umieszczasz je w kodzie źródłowym (np. <dialog>). Nie ma znaczenia, ile warstw w dół znajduje się w elemencie DOM. Element zostanie przeniesiony na górną warstwę i będzie można go sprawdzić w odpowiednim miejscu, w kodzie HTML komponentu. Ułatwia to sprawdzanie jednocześnie elementu aktywującego i elementu promowanego w modelu DOM. Szczególnie przydatne, jeśli element aktywujący aktualizuje atrybuty. Ta funkcja ma też dodatkową zaletę w zakresie ułatwień dostępu, ponieważ teraz elementy znajdują się w tej samej lokalizacji.
Aby zilustrować górną warstwę i wysoki poziom z-index, skorzystaj z tej prezentacji.
W tej wersji demonstracyjnej możesz otworzyć wyskakujące okienko SweetAlert i otwierać górną warstwę <dialog>. Otwórz <dialog>, a następnie spróbuj otworzyć wyskakujące okienko SweetAlert. Zobaczysz go pod elementem górnej warstwy. Głównym elementem naszego wyskakującego okienka SweetAlert jest z-index o wartości 10 000 z position: fixed.
.swal-overlay {
z-index: 10000;
position: fixed;
}
Nie musisz stosować żadnych stylów do elementu <dialog>, aby wyświetlał się powyżej innych treści.
DevTools
I w ten sposób dochodzimy do pomocy dotyczącej Narzędzi deweloperskich. Narzędzia deweloperskie w Chrome obsługują elementy górnej warstwy, dzięki czemu możesz sprawdzać górną warstwę. Ułatwia to debugowanie i wizualizację tego, jak różne elementy układają się w górną warstwę, a co jest nawet w górnej warstwie.
Alina Varkki ma świetny artykuł, w którym szczegółowo opisuje korzystanie z tych narzędzi. Są one obecnie dostępne w wersji testowej w Chrome Canary 105.
To wszystko.
Krótkie wprowadzenie do górnej warstwy. Pozwala powiedzieć „Pa!” na przykład:
.popup-container {
z-index: 10000;
}
Co umieścisz w górnej warstwie? Czy wypróbowałeś(-aś) już usługę dialog? A może sprawdziłeś(-aś) interfejs OpenUI Popover API? Prosimy o informacje.