z-index

Właściwość z-index w CSS3 jest używana do określenia kolejności stosowania elementów na stronie. Pozwala to na kontrolowanie, które elementy powinny być wyświetlane na wierzchu, gdy elementy nakładają się na siebie. Wartość z-index może być ustawiona na dowolną liczbę całkowitą (dodatnią, ujemną lub zero), a także na słowa kluczowe takie jak auto. Elementy z wyższą wartością z-index będą wyświetlane na wierzchu tych z niższą wartością.

Możliwe wartości z-index

  • auto: Domyślna wartość, element dziedziczy z-index od swojego rodzica.
  • liczba: Może być dowolną liczbą całkowitą (dodatnią, ujemną lub zero). Określa kolejność stosowania elementów.
  • inherit: Element dziedziczy wartość z-index od swojego rodzica.

Przykład: Stosowanie różnych wartości z-index

Poniższy przykład ilustruje użycie z-index do kontroli kolejności wyświetlania elementów na stronie. Ustawimy trzy nakładające się na siebie divy, z różnymi wartościami z-index, aby zobaczyć, jak ta właściwość wpływa na ich wyświetlanie.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Przykład z-index w CSS3</title>
    <style>
        .box {
            position: absolute;
            width: 100px;
            height: 100px;
            color: white;
            display: flex;
            justify-content: center;
            align-items: center;
        }
        .box1 {
            background-color: red;
            left: 50px;
            top: 50px;
            z-index: 1; /* Na środku */
        }
        .box2 {
            background-color: blue;
            left: 100px;
            top: 100px;
            z-index: 2; /* Na wierzchu */
        }
        .box3 {
            background-color: green;
            left: 150px;
            top: 150px;
            z-index: -1; /* Na dole */
        }
    </style>
</head>
<body>
    <div class="box box1">1</div>
    <div class="box box2">2</div>
    <div class="box box3">3</div>
</body>
</html>

Opis przykładu

  • .box1 (czerwony) ma z-index: 1, co umieszcza go na środku stosu.
  • .box2 (niebieski) ma z-index: 2, co czyni go najwyższym w stosie i wyświetla na wierzchu.
  • .box3 (zielony) ma z-index: -1, co umieszcza go na dole stosu, poniżej pozostałych elementów.

Podsumowanie

Właściwość z-index jest niezwykle przydatna podczas projektowania interfejsów użytkownika, gdzie kontrola nad kolejnością wyświetlania elementów może być kluczowa. Umożliwia tworzenie złożonych layoutów, gdzie elementy mogą się nakładać, zachowując przy tym pełną kontrolę nad ich wizualnym stosowaniem. Ważne jest, aby pamiętać, że z-index działa tylko na elementach, dla których ustawiono position na wartość inną niż static.

Jeżeli chcesz przyśpieszyć swoją naukę tworzenia stron chciałbym polecić mój kurs WebDevelopera od podstaw w którym nauczysz się tego języka od podstaw do zaawansowanych jego aspektów.

Poprzedni
Następny
Scroll to Top