0Pricing
CSS Academy · Lekcja

z-index i kontekst stosu

Ustawią Państwo, które elementy mają być wyświetlane na wierzchu za pomocą z-index i poznają konteksty stosu.

z-index i kontekst stosu to bezpłatna lekcja CSS Academy na CoddyKit. To lekcja 4 z 4. Możesz przeczytać całą lekcję poniżej za darmo — a potem ćwiczyć ją interaktywnie w przeglądarce z wbudowanym edytorem kodu i tutorem AI dostępnym 24/7. To część ścieżki edukacyjnej CSS Academy, a Twój postęp synchronizuje się między webem a aplikacją CoddyKit. Kurs CSS Academy zawiera 4 lekcji w sumie.

Czym jest z-index?

z-index kontroluje kolejność nakładania pozycjonowanych elementów wzdłuż osi Z (od przodu do tyłu). Gdy elementy nachodzą na siebie, wartości wyższe pojawiają się nad niższymi.

z-index działa tylko na pozycjonowanych elementach

z-index nie ma wpływu na elementy z position: static (wartość domyślna). Aby z-index działał, element musi mieć wartość relative, absolute, fixed lub sticky.

<div class="popup">Popup (position + z-index)</div>

Domyślna kolejność nakładania

Bez jawnie ustawionej właściwości z-index elementy są układane w następującej kolejności (od tyłu do przodu):

  1. tło elementu głównego
  2. elementy blokowe (w kolejności występowania w przepływie)
  3. elementy pływające
  4. elementy liniowe
  5. pozycjonowane elementy z z-index: auto lub 0

Kontekst stosu

Kontekst stosu to warstwa elementów ze wspólną osią Z. Wartości z-index konkurują ze sobą tylko w obrębie tego samego kontekstu stosu. Element znajdujący się w kontekście stosu nie może zostać umieszczony nad elementami znajdującymi się poza nim, niezależnie od wartości z-index.

Co tworzy kontekst stosu?

Nowy kontekst stosu tworzą:

  • position + wartość z-index inną niż auto
  • opacity mniejsze niż 1
  • zastosowane właściwości transform, filter lub perspective
  • will-change ustawione dla określonych właściwości
  • isolation: isolate
  • elementy flex/grid z z-index

Izolowanie kontekstu stosu

Użyj isolation: isolate, aby celowo utworzyć kontekst stosu bez żadnych efektów wizualnych. Jest to przydatne w przypadku komponentów interfejsu, które muszą zawierać własne warstwy z-index.

<div class="modal-wrapper">Isolated stacking context</div>

Problem ze skalą z-index

W projektach często występują „wojny z-index”, w których programiści prześcigają się w zwiększaniu wartości do 9999 lub 99999. Rozwiąż ten problem, używając nazwanej skali z-index opartej na zmiennych CSS:

<p>Custom properties define a z-index scale used across the app.</p>

Ujemny z-index

Ujemne wartości z-index umieszczają elementy za tłem bloku zawierającego. Można ich używać do tworzenia warstw dekoracyjnych z pseudoelementów umieszczanych za treścią.

<div class="card">Card with a decorative gradient layer behind it</div>

Debugowanie problemów z nakładaniem

Gdy modal lub podpowiedź pojawia się za innym elementem, przyczyną jest zwykle kontekst stosu na elemencie nadrzędnym z niską wartością z-index. Użyj widoku 3D w DevTools albo sprawdź właściwości opacity, transform i filter na elementach nadrzędnych.

z-index we Flex i Grid

Elementy flex i grid mogą bezpośrednio używać z-index bez jawnego ustawiania position. Na potrzeby określania kolejności nakładania przeglądarka traktuje je jak elementy pozycjonowane.

<div class="grid"><div class="grid-item demo-hover">1</div><div class="grid-item">2</div><div class="grid-item">3</div></div>

Modale stałe i z-index

Modale powinny być bezpośrednimi elementami potomnymi <body> (lub elementu opakowującego najwyższego poziomu), aby uniknąć kontekstów stosu elementów nadrzędnych. Element HTML <dialog> natywnie obsługuje to w najwyższej warstwie przeglądarki.

Szybkie sprawdzenie

Dwa nakładające się elementy mają z-index: 100 w różnych nadrzędnych kontekstach stosu. Co decyduje o tym, który z nich pojawi się na wierzchu?

Podsumowanie

z-index steruje kolejnością nakładania od przodu do tyłu w przypadku pozycjonowanych elementów. Konteksty stosu izolują rywalizację wartości z-index. Wszystko, co tworzy kontekst stosu na elemencie nadrzędnym, może ograniczyć wartości z-index elementów potomnych. Używaj isolation: isolate do tworzenia jawnych granic oraz zmiennych CSS do definiowania skali z-index.

Często zadawane pytania

Czy lekcja „z-index i kontekst stosu” jest bezpłatna?

Tak — pełny tekst „z-index i kontekst stosu” jest dostępny za darmo tutaj w sieci. Aby ćwiczyć ją interaktywnie (wbudowany edytor kodu i tutor AI dostępny 24/7) i odblokować resztę kursu CSS Academy, przejdź na CoddyKit PRO. Kurs CSS Academy zawiera 4 lekcji w sumie.

Co nauczysz się w „z-index i kontekst stosu”?

Ustawią Państwo, które elementy mają być wyświetlane na wierzchu za pomocą z-index i poznają konteksty stosu. Ćwiczysz CSS Academy z praktycznym kodem, który uruchamiasz bezpośrednio w przeglądarce, a tutor AI dostępny 24/7 odpowiada na Twoje pytania podczas pracy nad lekcją.

Czy potrzebuję doświadczenia, aby zacząć CSS Academy?

Nie wymagamy żadnego doświadczenia. CSS Academy w CoddyKit jest strukturyzowany dla początkujących i zaawansowanych użytkowników, więc możesz zacząć tutaj lub od początku i uczyć się w swoim tempie. To lekcja 4 z 4.

Ile czasu zajmuje lekcja „z-index i kontekst stosu”?

Większość lekcji CoddyKit trwa około 5–10 minut. Każda lekcja to mały, interaktywny krok, dzięki czemu robisz systematyczne postępy i zawsze wracasz dokładnie do tego samego miejsca — na webie i w aplikacji.

Czy mogę pisać i uruchamiać kod w tej lekcji CSS Academy?

Tak. Każda lekcja CSS Academy zawiera wbudowany edytor kodu, więc piszesz i uruchamiasz prawdziwy kod bezpośrednio w przeglądarce i od razu otrzymujesz sprzężenie zwrotne od AI — bez konfiguracji na komputerze.

Wszystkie lekcje w tym kursie

  1. Pozycjonowanie static i relative
  2. Pozycjonowanie absolute i blok zawierający
  3. Pozycjonowanie fixed i sticky
  4. z-index i kontekst stosu
← Powrót do CSS Academy