Czy kiedykolwiek ustawiłeś z-index: 99999 na elemencie swojego CSS i nie wychodził on na wierzch innych elementów? Tak duża wartość powinna z łatwością umieścić ten element na wierzchu czegokolwiek innego, zakładając, że wszystkie elementy mają ustawioną niższą wartość lub nie są ustawione wcale. Strona internetowa jest zwykle reprezentowana w przestrzeni dwuwymiarowej; jednakże poprzez zastosowanie określonych właściwości CSS wprowadzana jest wyimaginowana płaszczyzna osi Z, aby oddać głębię. Płaszczyzna ta jest prostopadła do ekranu i z niej użytkownik postrzega kolejność elementów, jeden na drugim. Ideą wyimaginowanej osi Z, czyli postrzegania przez użytkownika elementów ułożonych stosowo, jest to, że tworzące ją właściwości CSS łączą się, tworząc coś, co nazywamy kontekstem układania. Porozmawiamy o tym, jak elementy są „ułożone” na stronie internetowej, co kontroluje kolejność układania i praktycznych podejściach do „układania” elementów w razie potrzeby. O stosowaniu kontekstów Wyobraź sobie swoją stronę internetową jako biurko. Dodając elementy HTML, kładziesz kartki papieru na biurku, jedna po drugiej. Ostatnia umieszczona kartka papieru jest równoważna ostatnio dodanemu elementowi HTML i znajduje się na wierzchu wszystkich innych kartek umieszczonych przed nią. Jest to normalny obieg dokumentów, nawet w przypadku elementów zagnieżdżonych. Samo biurko reprezentuje główny kontekst układania, utworzony przez element , który zawiera wszystkie pozostałe foldery. Teraz w grę wchodzą określone właściwości CSS. Właściwości takie jak pozycja (z indeksem Z), krycie, transformacja i zawartość) działają jak folder. Folder ten pobiera element i wszystkie jego dzieci, wyodrębnia je z głównego stosu i grupuje w oddzielny stos podrzędny, tworząc coś, co nazywamy kontekstem stosu. W przypadku elementów pozycjonowanych dzieje się tak, gdy zadeklarujemy wartość indeksu Z inną niż auto. W przypadku właściwości takich jak krycie, transformacja i filtr kontekst stosowy jest tworzony automatycznie po zastosowaniu określonych wartości.
Spróbuj to zrozumieć: gdy kartka papieru (tj. element podrzędny) znajdzie się w folderze (tj. w kontekście nadrzędnym), nie może nigdy opuścić tego folderu ani zostać umieszczona pomiędzy papierami w innym folderze. Jego indeks Z jest teraz istotny tylko w jego własnym folderze.
Na poniższej ilustracji papier B znajduje się teraz w kontekście układania w folderze B i można go zamawiać wyłącznie z innymi papierami w folderze.
Wyobraź sobie, jeśli chcesz, że masz na biurku dwa foldery:
.folder-a {indeks z: 1; } .folder-b {indeks z: 2; }
Zaktualizujmy trochę znaczniki. Folder wewnętrzny A to strona specjalna, indeks Z: 9999. Folder wewnętrzny B to zwykła strona, indeks Z: 5.
.specjalna-strona { z-index: 9999; } . zwykła strona { z-index: 5; }
Która strona jest na górze? To zwykła strona w folderze B. Przeglądarka ignoruje dokumenty podrzędne i najpierw układa dwa foldery. Widzi folder B (indeks z: 2) i umieszcza go na wierzchu folderu A (indeks z: 1), ponieważ wiemy, że dwa jest większe niż jeden. Tymczasem strona .special-page ustawiona na z-index: 9999 znajduje się na dole stosu, mimo że jej indeks z jest ustawiony na najwyższą możliwą wartość. Konteksty układania można także zagnieżdżać (foldery wewnątrz folderów), tworząc „drzewo genealogiczne”. Obowiązuje ta sama zasada: dziecko nigdy nie może uciec z folderu rodziców. Teraz, gdy już wiesz, jak konteksty układania zachowują się jak foldery, które grupują i zmieniają kolejność warstw, warto zadać sobie pytanie: dlaczego pewne właściwości — takie jak transformacja i krycie — tworzą nowe konteksty układania? Rzecz w tym, że te właściwości nie tworzą kontekstów układania ze względu na ich wygląd; robią to ze względu na sposób działania przeglądarki pod maską. Stosując transformację, krycie, filtr lub perspektywę, mówisz przeglądarce: „Hej, ten element może się poruszyć, obrócić lub zniknąć, więc bądź gotowy!”
Gdy używasz tych właściwości, przeglądarka tworzy nowy kontekst stosowy, aby efektywniej zarządzać renderowaniem. Dzięki temu przeglądarka może niezależnie obsługiwać animacje, transformacje i efekty wizualne, redukując potrzebę ponownego obliczania interakcji tych elementów z resztą strony. Pomyśl o tym tak, jakby przeglądarka mówiła: „Zajmę się tym folderem osobno, więc nie będę musiał przestawiać całego biurka za każdym razem, gdy coś się w nim zmieni”. Ale jestefekt uboczny. Gdy przeglądarka uniesie element na własną warstwę, musi „spłaszczyć” wszystko w nim, tworząc nowy kontekst układania. To jakby zdjąć teczkę z biurka i zająć się nią oddzielnie; wszystko w tym folderze zostaje zgrupowane, a przeglądarka traktuje to teraz jako pojedynczą jednostkę przy podejmowaniu decyzji, co będzie na wierzchu. Zatem nawet jeśli właściwości transform i opacity mogą nie mieć wpływu na sposób, w jaki elementy układają się wizualnie, faktycznie tak jest i ma to na celu optymalizację wydajności. Z podobnych powodów kilka innych właściwości CSS może również tworzyć konteksty stosowe. Jeśli chcesz kopać głębiej, MDN udostępnia pełną listę. Jest ich całkiem sporo, co tylko ilustruje, jak łatwo można przypadkowo utworzyć kontekst układania, nie wiedząc o tym. Problem „rozbierania”. Problemy ze układaniem mogą wynikać z wielu powodów, ale niektóre są częstsze niż inne. Komponenty modalne są klasycznym wzorcem, ponieważ wymagają przełączenia komponentu w celu „otwarcia” na górnej warstwie nad wszystkimi innymi elementami, a następnie usunięcia go z górnej warstwy, gdy jest „zamknięty”. Jestem pewien, że każdy z nas spotkał się z sytuacją, w której otwieramy modal i z jakiegoś powodu się on nie pojawia. Nie chodzi o to, że nie otworzył się poprawnie, ale o to, że jest niewidoczny w dolnej warstwie kontekstu układania. To sprawia, że zaczynasz się zastanawiać: „Jak to się stało?” odkąd ustawiłeś:
.nakładka { pozycja: stała; /* tworzy kontekst stosowy */ indeks Z: 1; /* umieszcza element na warstwie ponad wszystkim innym */ wstawka: 0; szerokość: 100%; wysokość: 100vh; przepełnienie: ukryte; kolor tła: #00000080; }
Wygląda to poprawnie, ale jeśli element nadrzędny zawierający wyzwalacz modalny jest elementem podrzędnym w obrębie innego elementu nadrzędnego, który również ma ustawioną wartość Z-index: 1, technicznie rzecz biorąc, element modalny jest umieszczany w podwarstwie zasłoniętej przez główny folder. Przyjrzyjmy się temu konkretnemu scenariuszowi i kilku innym typowym pułapkom związanym z kontekstem stosowym. Myślę, że zobaczysz nie tylko, jak łatwo nieumyślnie utworzyć konteksty stosowe, ale także jak źle nimi zarządzać. Sposób powrotu do stanu zarządzanego zależy również od sytuacji. Scenariusz 1: Uwięziony modal
Możesz natychmiast zobaczyć swój modal uwięziony w warstwie niskiego poziomu i zidentyfikować rodzica. Rozszerzenia przeglądarki Inteligentni programiści stworzyli rozszerzenia, które mogą pomóc. Narzędzia takie jak to „Inspektor kontekstu układania CSS” Rozszerzenie do przeglądarki Chrome dodaje dodatkową zakładkę Z-index do narzędzi DevTools, aby wyświetlić informacje o elementach tworzących kontekst układania.
Rozszerzenia IDE Możesz nawet wykryć problemy podczas programowania, korzystając z rozszerzenia takiego jak to dla VS Code, które podkreśla potencjalne problemy z kontekstem układania bezpośrednio w edytorze.
Rozpakowywanie i odzyskiwanie kontroli Po zidentyfikowaniu pierwotnej przyczyny następnym krokiem jest zajęcie się nią. Istnieje kilka sposobów rozwiązania tego problemu. Wymienię je w kolejności. Możesz jednak wybrać dowolną osobę na dowolnym poziomie; nikt nie może narzekać ani przeszkadzać drugiemu. Zmień strukturę HTML Jest to uważane za optymalne rozwiązanie. Aby napotkać problem z kontekstem układania, musisz umieścić pewne elementy w śmiesznych pozycjach w swoim kodzie HTML. Restrukturyzacja strony pomoże Ci zmienić kształt DOM i wyeliminować problem z kontekstem stosowym. Znajdź problematyczny element i usuń go z elementu zalewkowego w znacznikach HTML. Na przykład możemy rozwiązać pierwszy scenariusz, „Uwięziony modal”, przenosząc kontener .modal-container z nagłówka i umieszczając go samodzielnie w elemencie
.Ta treść ma indeks Z wynoszący 2 i nadal nie obejmuje modalu.Nagłówek
Główna treść
Kiedy klikniesz przycisk „Otwórz modal”, modal zostanie umieszczony przed wszystkim innym, tak jak powinien. Zobacz scenariusz pióra 1: Uwięziony modal (rozwiązanie) [rozwidlony] autorstwa Shoyombo Gabriela Ayomide. DostosujKontekst układania nadrzędnego w CSS Co się stanie, jeśli elementu nie można przenieść bez zakłócania układu? Lepiej zająć się problemem: rodzic ustala kontekst. Znajdź właściwość (lub właściwości) CSS odpowiedzialną za wywołanie kontekstu i usuń ją. Jeśli ma to jakiś cel i nie można go usunąć, nadaj elementowi nadrzędnemu wyższą wartość indeksu Z niż jego elementy rodzeństwa, aby podnieść cały kontener. Przy wyższej wartości indeksu Z kontener nadrzędny przesuwa się na górę, a jego elementy podrzędne pojawiają się bliżej użytkownika. Bazując na tym, czego nauczyliśmy się w scenariuszu „Podwodne menu rozwijane”, nie możemy przenieść menu rozwijanego poza pasek nawigacyjny; to nie miałoby sensu. Możemy jednak zwiększyć wartość Z-index kontenera .navbar tak, aby była większa niż wartość Z-index elementu .content. .navbar { tło: #333; /* indeks Z: 1; */ indeks Z: 3; pozycja: względna; }
Dzięki tej zmianie menu .dropdown pojawia się teraz przed treścią bez żadnego problemu.
Zobacz scenariusz pióra 2: Podwodne menu rozwijane (rozwiązanie) [rozwidlone] autorstwa Shoyombo Gabriela Ayomide.
Wypróbuj portale, jeśli używasz frameworka
W frameworkach takich jak React lub Vue Portal to funkcja, która pozwala renderować komponent poza jego normalną hierarchią nadrzędną w DOM. Portale są jak urządzenie teleportujące Twoje komponenty. Umożliwiają renderowanie kodu HTML komponentu w dowolnym miejscu dokumentu (zazwyczaj bezpośrednio w document.body), zachowując logiczne połączenie z oryginalnym elementem nadrzędnym w zakresie właściwości, stanu i zdarzeń. Jest to idealne rozwiązanie do uniknięcia pułapek kontekstowych związanych z układaniem stosów, ponieważ wyrenderowane dane wyjściowe dosłownie pojawiają się poza problematycznym kontenerem nadrzędnym.
ReagujDOM.createPortal(
Dzięki temu zawartość listy rozwijanej nie jest ukryta za elementem nadrzędnym, nawet jeśli element nadrzędny ma przepełnienie: ukryty lub ma niższy indeks Z. W scenariuszu „Przycięta etykietka narzędzia”, który omawialiśmy wcześniej, użyłem portalu, aby uratować podpowiedź przed przepełnieniem: ukryty klip, umieszczając go w treści dokumentu i umieszczając nad wyzwalaczem w kontenerze. Zobacz scenariusz pióra 3: Obcięta etykietka narzędzia (rozwiązanie) [rozwidlona] autorstwa Shoyombo Gabriela Ayomide. Przedstawiamy kontekst układania bez skutków ubocznych Wszystkie podejścia wyjaśnione w poprzedniej sekcji mają na celu „usunięcie” elementów z problematycznych kontekstów układania, ale są pewne sytuacje, w których faktycznie będziesz potrzebować lub chcieć utworzyć kontekst układania. Tworzenie nowego kontekstu układania jest łatwe, ale wszystkie podejścia mają efekt uboczny. To znaczy, z wyjątkiem użycia izolacji: izolować. Po zastosowaniu do elementu kontekst układania elementów podrzędnych tego elementu jest określany w odniesieniu do każdego elementu podrzędnego i w tym kontekście, a nie pod wpływem elementów znajdujących się poza nim. Klasycznym przykładem jest przypisanie temu elementowi wartości ujemnej, np. z-index: -1. Wyobraź sobie, że masz komponent .card. Chcesz dodać dekoracyjny kształt, który będzie umieszczony za tekstem karty, ale nad tłem karty. Bez kontekstu układania na karcie, z-index: -1 wysyła kształt na dół głównego kontekstu układania (całą stronę). To sprawia, że znika ona za białym tłem karty: Zobacz indeks z-negatywu pióra (problem) [rozwidlony] autorstwa Shoyombo Gabriela Ayomide. Aby rozwiązać ten problem, deklarujemy izolację: izolowanie na nadrzędnej karcie .card: Zobacz Pen Negative Z-index (rozwiązanie) [rozwidlony] autorstwa Shoyombo Gabriela Ayomide. Teraz sam element .card staje się kontekstem stosowym. Kiedy jego element potomny — dekoracyjny kształt utworzony na pseudoelemencie :before — ma indeks Z: -1, przechodzi na sam dół kontekstu stosu elementu nadrzędnego. Zgodnie z zamierzeniami idealnie leży za tekstem i na tle karty. Wniosek Pamiętaj: następnym razem, gdy Twój indeks Z wymknie się spod kontroli, będzie to oznaczać uwięziony kontekst układania. Referencje
Kontekst układania (MDN) Konteksty indeksu Z i układania (web.dev) „Jak utworzyć nowy kontekst stosowy za pomocą właściwości izolacji w CSS”, Natalie Pina „Co do cholery, indeks Z?”, Josh Comeau
Dalsze czytanie na SmashingMag
„Zarządzanie indeksem Z CSS w dużych projektach”, Steven Frieson „Przyklejone nagłówki i elementy o pełnej wysokości: trudna kombinacja”, Philip Braunen „Zarządzanie indeksem Z w aplikacji internetowej opartej na komponentach”, Pavel Pomerantsev „Właściwość CSS Z-Index: kompleksowe spojrzenie”, Louis Lazaris
