33. Czym jest właściwość `z-index` w CSS i jak się jej używa?

Czym jest właściwość `z-index` w CSS i jak się jej używa?

Właściwość z-index w CSS służy do określania kolejności warstw elementów, które się nakładają. Jest szczególnie przydatna przy układaniu elementów jeden na drugim, na przykład gdy mamy okno dialogowe modalne pojawiające się nad stroną.

Podstawowe użycie

Właściwość z-index można stosować tylko do elementów, które mają ustawioną właściwość position na absolute, relative, fixed lub sticky. Jeśli z-index nie jest określony, elementy będą układać się zgodnie z kolejnością w dokumencie.

Oto prosty przykład:

<!DOCTYPE html>
<html lang="pl">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>
        .box1 {
            position: absolute;
            left: 50px;
            top: 50px;
            width: 100px;
            height: 100px;
            background-color: red;
            z-index: 1;
        }
        .box2 {
            position: absolute;
            left: 70px;
            top: 70px;
            width: 100px;
            height: 100px;
            background-color: blue;
            z-index: 2;
        }
    </style>
</head>
<body>
    <div class="box1"></div>
    <div class="box2"></div>
</body>
</html>

W tym przykładzie .box2 pojawi się na wierzchu .box1 ponieważ ma wyższą wartość z-index.

Uwagi

Domyślny z-index: Jeśli z-index nie jest ustawiony, kolejność warstw jest określana przez kolejność elementów w HTML.
Ujemny z-index: Można użyć wartości ujemnych, aby umieścić element za jego elementem nadrzędnym lub sąsiednimi.
Ten sam z-index: Gdy elementy mają ten sam z-index, będą się układać w kolejności, w jakiej pojawiają się w HTML.

Typowe pułapki

Tylko elementy z ustawioną właściwością position (absolute, relative, fixed, sticky) mogą mieć zastosowany z-index.
Wartości z-index mają wpływ tylko w kontekście układania swojego rodzica.

Efektywne wykorzystanie z-index może pomóc w tworzeniu atrakcyjnych interfejsów poprzez kontrolowane układanie zawartości warstwami.