Górna warstwa znajduje się nad powiązaną z nią warstwą document w widoku przeglądarki, a każda warstwa document ma jedną powiązaną z nią górną warstwę. Oznacza to, że elementy przeniesione do najwyższej warstwy nie muszą się martwić o hierarchię z-index ani DOM. Użytkownicy mogą też korzystać z przydatnego pseudoelementu ::backdrop. Specyfikacja Fullscreen API zawiera więcej szczegółów, ponieważ Fullscreen było świetnym przykładem najwyższej warstwy używanej przed wprowadzeniem obsługi dialog.
Górna warstwa pomaga rozwiązać problem renderowania treści nad resztą document.
Ważne informacje:
- Warstwa górna znajduje się poza przepływem 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 dodany element będzie widoczny u góry. Jeśli chcesz wypromować element, usuń go i dodaj ponownie.
Jak do tej pory naśladowaliśmy najwyższą warstwę? Deweloperzy często umieszczają pusty element kontenera na końcu body. Następnie zostanie on użyty jako „fałszywa” warstwa górna. Kontener ten jest umieszczany nad wszystkim innym w składance. Jeśli chcesz promować jakiś element nad wszystkim, musisz go dołączyć do tego kontenera. Dotyczy to popularnych pakietów, takich jak SweetAlert, reactjs-popup, Magnific Popup i inne.
Dzięki nowym wbudowanym komponentom i interfejsom API, takim jak <dialog> i „Pop-up”, nie będziesz musiał uciekać się do tych obejść. Możesz przenieść treści na górną warstwę.
Struktura interfejsu pozwala nam rozdzielić promowane elementy z ich odpowiednikami. Często jednak są rozdzielone w DOM, jeśli chodzi o renderowanie.
Dzięki użyciu najwyższej warstwy elementy promowane są umieszczane w miejscu, w którym zostały umieszczone w kodzie źródłowym (np. <dialog>). Nie ma znaczenia, ile warstw niżej w DOM znajduje się element. Zostanie on przeniesiony do najwyższej warstwy i będzie można go sprawdzić w miejscu, w którym się znajduje, czyli w pobliżu komponentu HTML. Dzięki temu łatwiej jest jednocześnie sprawdzić w DOM zarówno element reguły, jak i element promowany. Jest to szczególnie przydatne, jeśli np. element aktywujący aktualizuje atrybuty. Ma to też dodatkową zaletę ze względu na ułatwienia dostępu, ponieważ elementy znajdują się w tym samym miejscu.
Aby zilustrować różnicę między warstwą górną a wysoką z-index, zapoznaj się z tym demonstracją.
W tym pokazie możesz otworzyć wyskakujące okienko SweetAlert i warstwę górną <dialog>. Otwórz <dialog>, a następnie spróbuj otworzyć wyskakujące okienko SweetAlert. Zobaczysz, że pojawia się ona pod elementem najwyższej 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ę on nad wszystkimi innymi treściami.
Narzędzia deweloperskie
Dotarliśmy do pomocy Narzędzi deweloperskich. Narzędzia deweloperskie w Chrome obsługują teraz elementy najwyższej warstwy, dzięki czemu możesz je sprawdzać. Dzięki temu łatwiej będzie debugować i wizualizować, jak elementy są ułożone w górnej warstwie, lub co się w niej znajduje.
Alina Varkki napisała świetny artykuł, w którym szczegółowo omawia te narzędzia. Obecnie są one dostępne w wersji 105 przeglądarki Chrome Canary w wersji testowej.
To wszystko.
Krótkie wprowadzenie do najwyższej warstwy. Umożliwienie mówienia „Do widzenia!” w przypadku takich czynności jak:
.popup-container {
z-index: 10000;
}
Co należy przenieść do warstwy głównej? Czy próbowałeś/próbowałaś dialog? A może korzystasz z interfejsu OpenUI Popover API? Powiedz nam o tym!