Z-index

Pasek nawigacji jest przyklejony do góry ekranu, a pod nim przewija się zdjęcie piramidy - i nagle zdjęcie wjeżdża na menu, zasłaniając przyciski. Oba elementy zajmują to samo miejsce na ekranie, a przeglądarka musi zdecydować, który leży na wierzchu. Tę decyzję możesz przejąć właściwością z-index.

Właściwość z-index w CSS jest narzędziem, które pozwala kontrolować układanie się elementów względem siebie w osi Z, czyli "głębokości". Dzięki niej możemy określić, który element ma być wyświetlany na wierzchu, a który na dole. Wyobraź sobie stół skryby, na którym papirusy leżą jeden na drugim: w całości widzisz tylko ten na samej górze, a z-index to numer mówiący, w jakiej kolejności je ułożyć.

Co to jest z-index?

Właściwość z-index określa, jak elementy nakładają się na siebie, gdy zajmują to samo miejsce na ekranie. Jest to wartość całkowita (może być dodatnia, ujemna lub równa zero), która determinuje, jak daleko "do przodu" lub "do tyłu" element jest umieszczony w stosunku do innych elementów. Domyślna wartość to auto, a liczba nie ma jednostki - piszesz z-index: 10, a nie 10px.

Element z wyższą wartością przykrywa element z niższą, więc stos 1, 10, 100 i 999 układa się od spodu ku górze. Liczą się tylko relacje między liczbami: 2 nad 1 działa dokładnie tak samo jak 999 nad 998.

Jak działa z-index?

Właściwość z-index działa tylko z elementami, które mają pozycję ustawioną na relative, absolute, fixed lub sticky. Przy domyślnym position: static przeglądarka po prostu ją pominie - to najczęstszy powód, dla którego "z-index nie działa". Wyjątkiem są elementy flex i grid, które poznasz w kolejnych modułach. Najprostsze użycie to element pozycjonowany absolutnie, któremu nadajemy z-index równy 1:

div {
  position: absolute;
  z-index: 1; /* Element będzie wyżej niż inne elementy o niższej wartości z-index */
}

Obie deklaracje muszą działać razem: usuń position, a z-index przestanie działać, choć przeglądarka nie zgłosi żadnego błędu. Zobaczmy teraz dwa papirusy, które zajmują to samo miejsce:

.papirus-ramzes {
  position: absolute;
  z-index: 2;
}

.papirus-cheops {
  position: absolute;
  z-index: 1;
}

Na wierzchu leży papirus Ramzesa, bo 2 to więcej niż 1 - nawet jeśli w HTML stoi przed papirusem Cheopsa. Bez z-index o kolejności decydowałby kod: element zapisany później leżałby wyżej.

Przypadki użycia

Właściwość z-index jest szczególnie przydatna, gdy chcesz, aby pewne elementy były widoczne ponad innymi - jak pieczęć faraona przyłożona na wierzch zwoju.

Nawigacja

Jeśli chcesz, aby pasek nawigacji był zawsze na wierzchu i żadna przewijana treść go nie zasłoniła, możesz użyć z-index:

.navbar {
  position: fixed;
  z-index: 1000;
}

Deklaracja position: fixed przykleja pasek do okna przeglądarki, a z-index: 1000 zostawia duży zapas - pod spodem zmieszczą się wszystkie zwykłe warstwy strony.

Modalne okna i tooltips

Dla modalnych okien i dymków podpowiedzi z-index pozwala na wyświetlanie ich ponad resztą strony, na przykład nad zdjęciami i kartami:

.tooltip {
  position: absolute;
  z-index: 100;
}

Dymek z wartością 100 przykryje zwykłą treść, ale sam schowa się pod paskiem nawigacji z wartością 1000 - i zwykle właśnie o to chodzi.

Potencjalne problemy

Zarządzanie wartościami z-index może być skomplikowane w dużych projektach. Ustalanie zbyt wielu różnych wartości może prowadzić do konfliktów i trudności w utrzymaniu kodu.

Druga pułapka to kontekst nakładania (ang. stacking context). Element pozycjonowany z ustawionym z-index tworzy własny stos, a jego dzieci rywalizują tylko między sobą. Dziecko z z-index: 9999 nie wyjdzie ponad sąsiada swojego rodzica, jeśli sam rodzic leży niżej. To jak papirus schowany w skrzyni: możesz go położyć na górze stosu w środku, ale nie wyjmiesz go ponad wieko. Kontekst nakładania tworzą też m.in. opacity mniejsze niż 1 i transform, który poznasz pod koniec tego modułu.

Moja rada: ustal w projekcie kilka stałych poziomów, na przykład 1 dla zwykłych nakładek, 100 dla dymków i 1000 dla nawigacji, i trzymaj się ich zamiast dopisywać coraz większe liczby. Pamiętaj: z-index to numer papirusu w stosie na stole skryby - wyższy leży wyżej, ale tylko wtedy, gdy element ma ustawioną pozycję.