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.

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.

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.

Przykład:

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

Przypadki Użycia

Właściwość z-index jest szczególnie przydatna, gdy chcesz, aby pewne elementy były widoczne ponad innymi, tak jak gwiazdy mogą być widoczne ponad planetami w modelu kosmosu.

Nawigacja

Jeśli chcesz, aby pasek nawigacji był zawsze na wierzchu, możesz użyć z-index:

1.navbar {
2  position: fixed;
3  z-index: 1000;
4}

Modalne Okna i Tooltips

Dla modalnych okien i dymków podpowiedzi, z-index pozwala na wyświetlanie ich ponad resztą strony:

1.tooltip {
2  position: absolute;
3  z-index: 100;
4}

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.