Podstawy z-index

Część sekcji Stylizacja za pomocą CSS ścieżki HTML w Coddy. Lekcja 59 z 76.

W CSS właściwość z-index określa kolejność nakładania elementów pozycjonowanych (elementów, których pozycja jest inna niż static). Gdy elementy nachodzą na siebie, z-index określa, który element pojawi się na wierzchu, a który z tyłu. Elementy o wyższej wartości z-index są umieszczane przed elementami o niższej wartości.

Oto podstawowa składnia używania właściwości z-index:

selector {
    position: relative; /* lub absolute, fixed albo sticky */
    z-index: value;
}

position: relative; (lub absolute, fixed lub sticky): element musi być pozycjonowany, aby z-index działał.

value: Wartość całkowita określająca kolejność nakładania. Elementy o wyższych wartościach są wyświetlane przed elementami o niższych wartościach. Wartość może być dodatnia, ujemna lub równa zero.

Na przykład:

.box1 {
    position: absolute;
    top: 50px;
    left: 50px;
    z-index: 2;
}

.box2 {
    position: absolute;
    top: 70px;
    left: 70px;
    z-index: 1;
}

W tym przykładzie zarówno .box1, jak i .box2 są pozycjonowane absolutnie. Ponieważ .box1 ma wyższą wartość z-index, będzie wyświetlany przed .box2, gdy będą na siebie nachodzić.

Wyzwanie

Łatwy

Otrzymujesz dokument HTML z trzema nakładającymi się elementami (<div>) o klasach box1, box2 i box3. Twoim zadaniem jest użycie właściwości z-index do kontrolowania kolejności nakładania się tych elementów. Wykonaj poniższe kroki:

Napisz regułę CSS, która wybiera element <div> z klasą box1. Ustaw jego właściwość position na absolute, top na 0, left na 0, a z-index na 3.
Napisz regułę CSS, która wybiera element <div> z klasą box2. Ustaw jego właściwość position na absolute, top na 20px, left na 20px, a z-index na 2.
Napisz regułę CSS, która wybiera element <div> z klasą box3. Ustaw jego właściwość position na absolute, top na 40px, left na 40px, a z-index na 1.

Zaobserwuj, jak wartości z-index wpływają na kolejność nakładania się elementów, przy czym box1 znajduje się na wierzchu, a box3 na dole.

Spróbuj swoich sił

<html>
<head>
    <title>Z-Index Basics</title>
    <style>
        .box1 {
            position: absolute;
            width: 100px;
            height: 100px;
            background-color: lightblue;
        }
        .box2 {
            position: absolute;
            width: 150px;
            height: 150px;
            background-color: lightgreen;
        }
        .box3 {
            position: absolute;
            width: 200px;
            height: 200px;
            background-color: lightcoral;
        }
        /* Write CSS rules here */
    </style>
</head>
<body>
    <div class="box1">Box 1</div>
    <div class="box2">Box 2</div>
    <div class="box3">Box 3</div>
</body>
</html>