ukryte elementy z powodu błędnych Z-indexów

Ukryte elementy z powodu błędnych Z-indexów to usterka układu, w której warstwy przesłaniają się nawzajem.

Jak powstaje przesłanianie przez błędny z-index

Ukryte elementy z powodu błędnych z-indexów są skutkiem nieprawidłowego ustalenia kolejności rysowania warstw na stronie internetowej. W interfejsie mogą znajdować się między innymi menu rozwijane, okno dialogowe, baner, przycisk, panel boczny, komunikat błędu albo element pozycjonowany nad główną treścią. Właściwość CSS z-index określa położenie elementu na osi prostopadłej do ekranu, ale nie działa jak globalna numeracja wszystkich obiektów. Wartość z-index: 1000 nie musi więc spowodować, że element znajdzie się nad każdym elementem z niższą wartością.

Elementy są porównywane w obrębie tak zwanych kontekstów stosu. Nowy kontekst stosu może powstać między innymi dla elementu pozycjonowanego z wartością z-index inną niż auto, dla elementu z position: fixed lub sticky, a także w wyniku użycia właściwości transform, filter, opacity mniejszej niż 1, isolation: isolate czy niektórych wartości contain. Jeżeli jeden kontekst stosu znajduje się pod drugim, potomny element z wysokim z-indexem nie może samodzielnie wydostać się ponad cały nadrzędny kontekst. To często wyjaśnia sytuację, w której zwiększanie liczby w CSS nie przynosi żadnego efektu.

Konteksty stosu, pozycjonowanie i kolejność rysowania

Sam z-index ma znaczenie przede wszystkim dla elementów pozycjonowanych, czyli takich, którym nadano position: relative, absolute, fixed albo sticky. Współczesny CSS dopuszcza także użycie tej właściwości dla elementów będących dziećmi kontenera display: flex lub display: grid, nawet gdy nie mają one ustawionego pozycjonowania. Element bez odpowiedniego kontekstu może ignorować oczekiwaną wartość albo być nadal rysowany zgodnie z kolejnością wynikającą ze struktury dokumentu.

Przykładowy problem występuje wtedy, gdy panel modalny znajduje się wewnątrz kontenera z z-index: 1, a jego rodzic ma jednocześnie transform: translateZ(0). Nawet jeśli modal otrzyma z-index: 9999, cały ten kontekst może pozostać pod sąsiednim nagłówkiem z z-index: 2. Rozwiązaniem jest zwykle przeniesienie modalu do właściwego miejsca w strukturze HTML albo zmiana poziomów nadrzędnych kontekstów, a nie dalsze zwiększanie wartości. Podobnie działa overflow: hidden: nie zmienia bezpośrednio z-indexu, lecz może przyciąć element wychodzący poza granice kontenera i sprawić wrażenie, że warstwa została ukryta.

Znaczenie ma również kolejność elementów w kodzie. Gdy kilka elementów znajduje się na tym samym poziomie stosu i ma porównywalne właściwości, później występujący element może być narysowany nad wcześniejszym. Elementy pseudo-::before i ::after także uczestniczą w rysowaniu zawartości swojego właściciela. Nieprawidłowe ustawienie ich pozycji, tła lub z-indexu może przykryć tekst, ikonę albo obszar reagujący na kliknięcie.

Rozpoznawanie niewidocznej warstwy w przeglądarce

Diagnostykę rozpoczyna się od sprawdzenia, czy element rzeczywiście jest obecny w drzewie DOM. Narzędzia deweloperskie przeglądarki pozwalają zaznaczyć element na stronie i przejść do zakładek pokazujących style obliczone, pozycjonowanie oraz strukturę rodziców. Warto sprawdzić właściwości position, z-index, display, visibility, opacity, pointer-events, overflow, transform i isolation. display: none usuwa element z układu renderowania, natomiast visibility: hidden pozostawia zajmowane miejsce, lecz nie wyświetla zawartości. Żadna z tych sytuacji nie jest klasycznym błędem z-indexu, dlatego trzeba je odróżnić.

Pomocne jest chwilowe nadanie podejrzanej warstwie kontrastowego tła, obramowania oraz wymiarów, a następnie obserwowanie jej położenia w panelu „Computed” lub „Layout”. Jeżeli element jest widoczny, ale nie można go kliknąć, nad nim może znajdować się przezroczysta warstwa. Wtedy należy sprawdzić nakładanie prostokątów, właściwość pointer-events oraz element wskazywany przez narzędzie wyboru w danym punkcie ekranu. Dla kodu JavaScript można wykorzystać metodę document.elementFromPoint(x, y), aby ustalić, który element przeglądarka uznaje za znajdujący się najwyżej pod wskazanymi współrzędnymi.

Warto testować stronę przy różnych szerokościach okna, ponieważ reguły w media queries mogą zmieniać position, wysokość kontenera, kolejność elementów lub wartości z-indexu. Błąd widoczny tylko na telefonie może wynikać z mobilnego menu, stałego paska albo elementu o szerokości większej niż obszar widoku. Jeżeli problem dotyczy kliknięć, trzeba sprawdzić również niewidoczne elementy o dużym rozmiarze, ujemne marginesy i warstwy rozciągnięte przez width: 100% lub height: 100%.

Naprawa warstw interfejsu i kontrola po zmianach

Naprawa powinna polegać na uporządkowaniu modelu warstw. Najpierw należy ustalić, które elementy mają być tłem, treścią, stałym panelem, menu, komunikatem oraz modalem. Następnie można nadać poziomy z-index tylko tym elementom, które rzeczywiście się nakładają, oraz ograniczyć liczbę niezależnych kontekstów stosu. W praktyce bezpieczniejsza jest mała, opisana skala wartości niż przypadkowe liczby takie jak 999, 9999 i 2147483647. Należy też usunąć niepotrzebne transform, opacity lub filter z rodziców warstw, jeżeli tworzą one niezamierzony kontekst stosu.

Elementy globalne, takie jak modal lub komunikat wysuwany nad całą aplikacją, powinny mieć przewidywalne miejsce w strukturze dokumentu. Często umieszcza się je bezpośrednio pod elementem body albo w osobnym kontenerze przeznaczonym na nakładki. Jeżeli warstwa ma być ograniczona do konkretnego panelu, trzeba świadomie ustawić position: relative na tym panelu i sprawdzić, czy jego overflow nie przycina zawartości. W przypadku elementów interaktywnych trzeba dodatkowo potwierdzić obsługę klawiatury, widoczny fokus i brak zasłaniania przycisku przez pustą, lecz aktywną warstwę.

Po modyfikacji CSS należy sprawdzić stronę w używanych przeglądarkach, przy powiększeniu widoku oraz w kilku rozdzielczościach. Kontrola powinna obejmować otwieranie i zamykanie menu, dialogów, tooltipów oraz komunikatów, a także kliknięcia w elementy znajdujące się pod nakładką. Warszawskie Pogotowie Komputerowe zajmuje się profesjonalną naprawą laptopów, komputerów PC i podzespołów, dlatego może również sprawdzić problemy z niewidocznym interfejsem podczas diagnostyki oprogramowania na komputerze użytkownika.