Własność CSS z-index

Własność CSS z-index określa miejsce elementu pozycjonowanego (także w technologiach CSS Flexbox i CSS Grid Layout) na osi 𝑧. Im wyższa jest wartość tej własności, tym wyżej na stosie (bliżej użytkownika patrzącego na monitor) znajduje się dany element.

Dla każdego elementu pozycjonowanego za pomocą własności position własność z-index określa dwie kwestie:

• Jego położenie na osi 𝑧.
• To, czy element ten ustanawia kontekst stosowy.

Wartości i składnia

Własność z-index przyjmuje jedną z następujących wartości:

auto

Element znajduje się na poziomie 0 w kontekście stosowym i nie tworzy nowego lokalnego kontekstu stosowego.

Liczba całkowita bez jednostki

Określa miejsce elementu w kontekście stosowym oraz powoduje, że element tworzy lokalny kontekst stosowy. Stworzenie lokalnego kontekstu stosowego przez element oznacza, że wartości z-index jego potomków nie są porównywane z wartościami z-index elementów znajdujących się poza nim.

Przykłady

W poniższym przykładzie domyślnie elementy a, b i c byłyby ułożone tak, że na spodzie znajdowałby się element a (czerwony), w środku znajdowałby się element b (zielony), a na wierzchu (widoczny w całości) byłby element c (niebieski). Jednak za pomocą własności z-index ta kolejność została zmieniona, tak że na wierzchu znajduje się element a, w środku – element c, a na spodzie – element b.

<style>
#a {
  background-color: red;
  height: 100px;
  width: 300px;
  position: relative;
  z-index: 3;
}
#b {
  background-color: green;
  height: 100px;
  width: 300px;
  position: relative;
  top: -70px;
  left: 60px;
  z-index: 1;
}
#c {
  background-color: blue;
  height: 100px;
  width: 300px;
  position: relative;
  top: -140px;
  left: 120px;
  z-index: 2;
}
</style>
...
<div id="a"></div>
<div id="b"></div>
<div id="c"></div>

Podsumowanie