Górna warstwa znajduje się w widocznym obszarze przeglądarki nad powiązaną z nią warstwą document, a każdy element document ma powiązaną górną warstwę. Oznacza to, że elementy awansowane do najwyższej warstwy nie muszą martwić się o hierarchię z-index ani DOM. Oprócz tego dostają przyjemny dla oka pseudoelement ::backdrop. Specyfikacja Fullscreen API zawiera więcej szczegółów, ponieważ Pełny ekran był doskonałym przykładem górnej warstwy używanej przed pojawieniem się obsługi dialog.
Górna warstwa pomaga rozwiązać problem renderowania zawartości znajdującej się powyżej pozostałej części obszaru document.
Ważne kwestie, o których należy pamiętać:
– Górna warstwa jest poza procesem document.
– z-index nie ma wpływu na górną warstwę.
– Każdy element w górnej warstwie ma pseudoelement ::backdrop z możliwością określenia stylu.
– Każdy element i element ::backdrop generują nowy kontekst grupowania.
– Elementy w górnej warstwie są ułożone w kolejności, w jakiej występują w zestawie. Ostatni w kolekcji, wyświetla się na górze. Jeśli chcesz wypromować element, usuń go i dodaj ponownie.
W jaki sposób do tej pory imitowaliśmy górną warstwę? Nierzadko deweloperzy umieszczają pusty element kontenera na końcu body. To jest potem używane jako „fałszywe” wierzchołkowej. Chodzi o to, że ten kontener jest umieszczony nad wszystkimi innymi elementami w stosie. Jeśli chcesz promować jakiś element nad wszystkim, musisz go dołączyć do tego kontenera. Widać to w popularnych pakietach, takich jak SweetAlert, reactjs-popup czy Magnific Popup.
Dzięki nowym wbudowanym komponentom i interfejsom API, takim jak <dialog> czy „Popover”, nie musisz korzystać z tych obejść. Możesz promować treści na najwyższej warstwie.
Struktura interfejsu pozwala nam rozdzielić promowane elementy z ich odpowiednikami. Często jednak są rozdzielone w DOM, jeśli chodzi o renderowanie.
Dzięki korzystaniu z górnej warstwy umieszczasz je tam, gdzie umieszczasz je w kodzie źródłowym (np. <dialog>). Nie ma znaczenia, ile warstw w dół w DOM jest dany element. Zostanie on awansowany do najwyższej warstwy i będzie można go sprawdzić tam, gdzie powinien, wraz z komponentem HTML. Ułatwia to sprawdzanie jednocześnie elementu reguły i elementu promowanego w DOM. Jest to szczególnie przydatne, jeśli np. element aktywatora aktualizuje atrybuty. Ma to też dodatkową zaletę ze względu na ułatwienia dostępu, ponieważ elementy znajdują się w tym samym miejscu.
Aby zaprezentować górną i górną warstwę (z-index), przyjrzyj się tej wersji demonstracyjnej.
W tej wersji demonstracyjnej możesz otworzyć wyskakujące okienko SweetAlert i kliknąć górną warstwę <dialog>. Otwórz aplikację <dialog>, a następnie spróbuj otworzyć wyskakujące okienko SweetAlert. Będzie ona widoczna pod elementem górnej warstwy. W naszym wyskakującym okienku SweetAlert jest używana wartość z-index o wartości 10 000 z parametrem position: fixed.
.swal-overlay {
z-index: 10000;
position: fixed;
}
Nie musisz stosować żadnych stylów do elementu <dialog>, aby wyświetlał się nad wszystkimi innymi treściami.
Narzędzia deweloperskie
Dotarliśmy do pomocy Narzędzi deweloperskich. W Narzędziach deweloperskich w Chrome dodano obsługę elementów górnej warstwy, umożliwiając ich sprawdzanie. Ułatwia to debugowanie i wizualizację tego, jak radzą sobie elementy w górnej lub nawet górnej warstwie.
Alina Varkki szczegółowo omawia korzystanie z tych narzędzi za pomocą świetnego artykułu. Obecnie są one dostępne w wersji testowej w Chrome Canary w wersji 105.
To wszystko.
Krótkie wprowadzenie do najwyższej warstwy. Umożliwienie wypowiedzenia „Pa!” na przykład:
.popup-container {
z-index: 10000;
}
Co umieścić w górnej warstwie? Czy zdarzyło Ci się już wypróbować dialog? A może chcesz zapoznać się z interfejsem OpenUI Popover API? Powiedz nam o tym!