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.