z-index

Ustala, który element leży wyżej, gdy elementy na siebie nachodzą.

Wartość domyślna: auto
Dziedziczona: Nie
Animowalna: tak, jako liczba całkowita
Dotyczy: elementy pozycjonowane oraz elementy flex i grid
JavaScript: element.style.zIndex = "10"

Na tej stronie

Przykład
Definicja i zastosowanie
Składnia
Wartości
Wartości w praktyce
Obsługa przeglądarek
Dobre praktyki
Powiązane hasła

Przykład

CSS

.header {
  position: sticky;
  top: 0;
  z-index: 10;
}

HTML przykładu

<div class="stage" style="height: 130px; overflow: auto; padding: 0;">
  <div class="header box" style="border-radius: 0">Przyklejony nagłówek nad treścią</div>
  <p style="padding: 0 12px">Przewiń. Treść przesuwa się pod nagłówkiem, bo ma on wyższy z-index.</p>
  <p style="padding: 0 12px; position: relative;">Akapit z position: relative.</p>
  <p style="padding: 0 12px">Kolejny akapit.</p>
  <p style="padding: 0 12px">I jeszcze jeden.</p>
</div>

Podgląd

Definicja i zastosowanie

Właściwość z-index określa kolejność warstw na osi prostopadłej do ekranu. Element z wyższą wartością przykrywa elementy z niższą. Działa na elementach z pozycjonowaniem oraz na dzieciach kontenerów flex i grid.

Kluczowe pojęcie to kontekst stosu. Elementy porównują swoje z-index tylko w obrębie tego samego kontekstu. Jeśli rodzic tworzy własny kontekst (na przykład przez z-index, opacity mniejsze niż 1 albo transform), jego dzieci nie wyjdą nad elementy spoza niego, nawet z wartością 9999.

Bez ustawionego z-index elementy nakładają się w kolejności występowania w kodzie: późniejszy przykrywa wcześniejszy.

Składnia

z-index: auto | <liczba całkowita>;

Wartości

auto
Element 2 nie ma własnej warstwy i ląduje pod elementami 1 i 3.
3
<liczba>
Najwyższa wartość w grupie, więc element 2 leży na wierzchu.
-1
<liczba ujemna>
Ujemna wartość chowa element pod pozostałymi, a nawet pod tłem rodzica bez własnego kontekstu.

Wartość	Typ	Opis
auto		Element 2 nie ma własnej warstwy i ląduje pod elementami 1 i 3.
3	<liczba>	Najwyższa wartość w grupie, więc element 2 leży na wierzchu.
-1	<liczba ujemna>	Ujemna wartość chowa element pod pozostałymi, a nawet pod tłem rodzica bez własnego kontekstu.

Wartości w praktyce

auto

Element 2 nie ma własnej warstwy i ląduje pod elementami 1 i 3.

.demo { z-index: auto; }

Najwyższa wartość w grupie, więc element 2 leży na wierzchu.

.demo { z-index: 3; }

-1

Ujemna wartość chowa element pod pozostałymi, a nawet pod tłem rodzica bez własnego kontekstu.

.demo { z-index: -1; }

Obsługa przeglądarek

Szeroko dostępne

Działa we wszystkich nowoczesnych przeglądarkach, także na telefonach. Możesz używać bez obaw.

Chrome
Edge
Firefox
Safari

Dobre praktyki

Zamiast rywalizować wartościami typu 9999, ustal skalę, na przykład 10 dla nagłówka, 100 dla menu i 1000 dla okien modalnych.
Gdy z-index „nie działa”, poszukaj przodka, który tworzy nowy kontekst stosu przez transform, opacity albo filter.

Powiązane hasła

Widzisz błąd albo brakuje przykładu? Napisz do nas.

Darmowy kursPrzećwicz CSS w kursie HTML i CSSZadania z podpowiedziami, edytor kodu i postępy zapisywane na bieżąco.Zobacz kurs