Z-Index Grundlagen

Teil des Abschnitts Styling with CSS der HTML-Journey von Coddy — Lektion 59 von 76.

In CSS steuert die Eigenschaft z-index die Stapelreihenfolge von positionierten Elementen (Elemente mit einer anderen Position als static). Wenn sich Elemente überlappen, bestimmt der z-index, welches Element oben erscheint und welches dahinter erscheint. Elemente mit einem höheren z-index-Wert werden vor Elementen mit einem niedrigeren Wert gestapelt.

Hier ist die grundlegende Syntax für die Verwendung der z-index-Eigenschaft:

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

position: relative; (oder absolute, fixed, oder sticky): Das Element muss positioniert sein, damit z-index eine Wirkung hat.

value: Ein ganzzahliger Wert, der die Stapelreihenfolge darstellt. Elemente mit höheren Werten werden vor Elementen mit niedrigeren Werten gestapelt. Der Wert kann positiv, negativ oder null sein.

Zum Beispiel:

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

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

In diesem Beispiel sind sowohl .box1 als auch .box2 absolut positioniert. Da .box1 einen höheren z-index-Wert hat, wird es vor .box2 gestapelt, wenn sie sich überlappen.

Aufgabe

Einfach

Ihnen wird ein HTML-Dokument mit drei überlappenden Divisionen (<div>) mit den Klassen box1, box2 und box3 gegeben. Ihre Aufgabe ist es, die Eigenschaft z-index zu verwenden, um die Stapelreihenfolge dieser Elemente zu steuern. Befolgen Sie die folgenden Schritte:

Schreiben Sie eine CSS-Regel, die auf das <div>-Element mit der Klasse box1 abzielt. Setzen Sie dessen Eigenschaft position auf absolute, top auf 0, left auf 0 und z-index auf 3.
Schreiben Sie eine CSS-Regel, die auf das <div>-Element mit der Klasse box2 abzielt. Setzen Sie dessen Eigenschaft position auf absolute, top auf 20px, left auf 20px und z-index auf 2.
Schreiben Sie eine CSS-Regel, die auf das <div>-Element mit der Klasse box3 abzielt. Setzen Sie dessen Eigenschaft position auf absolute, top auf 40px, left auf 40px und z-index auf 1.

Beobachten Sie, wie die z-index-Werte die Stapelreihenfolge der Boxen beeinflussen, wobei box1 oben und box3 unten liegt.

Spickzettel

Die Eigenschaft z-index steuert die Stapelreihenfolge von positionierten Elementen. Elemente mit höheren z-index-Werten erscheinen vor Elementen mit niedrigeren Werten.

Grundlegende Syntax:

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

Anforderungen:

Das Element muss eine andere Position als static haben
Der Wert kann positiv, negativ oder null sein
Höhere Werte werden vor niedrigeren Werten gestapelt

Beispiel:

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

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

Probier es selbst

<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>