Schichtkontext

2.1 Eigenschaft z-index

Schichtkontext in CSS wird durch die Eigenschaft z-index gesteuert und bestimmt, wie Elemente entlang der Z-Achse (der dritten Koordinate, die senkrecht zum Bildschirm steht) übereinanderliegen. Das Verständnis und die korrekte Verwendung von z-index und Schichtkontext ermöglicht es, komplexe und dynamische Layouts mit überlappenden Elementen zu erstellen.

Grundlagen des Schichtkontexts

Der Schichtkontext bestimmt, wie Elemente übereinander angezeigt werden. Jedes Element auf einer Webseite hat eine Überlagerungsebene, die mit Hilfe der Eigenschaft z-index verändert werden kann.

Schichtregeln

1. Position im Dokumentbaum: Elemente, die weiter unten im Dokumentbaum stehen, überlagern Elemente, die weiter oben stehen.
2. Eigenschaft z-index: Elemente mit einem höheren Wert von z-index überlagern Elemente mit einem niedrigeren Wert von z-index.

Grundlagen von z-index

Die Eigenschaft z-index bestimmt die Overlay-Reihenfolge von Elementen, wenn sie einander überlappen. Elemente mit einem höheren Wert von z-index werden über Elemente mit einem niedrigeren Wert angezeigt. z-index wird nur auf Elemente mit Positionierung angewendet (position: relative, absolute, fixed oder sticky).

Syntax:

    
      .element {
        position: relative; /* oder absolute, fixed, sticky */
        z-index: number;
      }
    
  

Wo:

• number: eine ganze Zahl, die positiv oder negativ sein kann. Je größer der Wert, desto höher wird das Element in der Überlagerungsreihenfolge sein.

Beispiel für die Verwendung von z-index:

In diesem Beispiel wird Box 2 mit z-index: 2; über Box 1 und Box 3 angezeigt, und Box 1 wird über Box 3 angezeigt.

    
      .wrapper {
        min-height: 300px;
      }

      .box {
        position: absolute;
        min-width: 125px;
        min-height: 125px;
        color: white;
      }

      .box1 {
        z-index: 1;
        top: 50px;
        left: 50px;
        background-color: red;
      }

      .box2 {
        z-index: 2;
        top: 100px;
        left: 100px;
        background-color: blue;
      }

      .box3 {
        z-index: 0;
        top: 150px;
        left: 150px;
        background-color: green;
      }
    
  

    
      <div class="wrapper">
        <div class="box box1">Box 1</div>
        <div class="box box2">Box 2</div>
        <div class="box box3">Box 3</div>
      </div>
    
  

2.2 Schichtkontext (stacking context)

Ein Schichtkontext ist eine Gruppe von Elementen, die als eine Einheit betrachtet werden, wenn der Überlagerungsreihenfolge bestimmt wird. Ein Schichtkontext wird unter bestimmten Bedingungen erstellt, wie z.B. die Anwendung von z-index mit Positionierung oder das Vorhandensein anderer CSS-Eigenschaften.

Erstellen eines Schichtkontexts

Ein Schichtkontext wird in folgenden Fällen erstellt:

1. Ein Element hat eine Positionierung von relative, absolute, fixed oder sticky und ein z-index-Wert, der ungleich auto ist.
2. Ein Element hat die Eigenschaft opacity mit einem Wert kleiner als 1.
3. Ein Element hat eine der Eigenschaften transform, filter, perspective, clip-path, mask oder mask-image, die vom Standardwert abweicht.
4. Ein Element hat die Eigenschaft contain mit dem Wert layout, paint, oder strict.

Beispiel für die Erstellung eines Schichtkontexts:

    
      .parent {
        position: relative;
        z-index: 10;
        min-height: 300px;
        padding: 20px;
        color: white;
        background-color: #f1c40f;
      }

      .child-blue {
        position: absolute;
        z-index: 1;
        top: 50px;
        left: 50px;
        min-width: 125px;
        min-height: 125px;
        background-color: #3498db;
      }

      .child-red {
        position: absolute;
        z-index: 2;
        top: 100px;
        left: 100px;
        min-width: 125px;
        min-height: 125px;
        background-color: #e74c3c;
      }
    
  

    
      <div class="parent">
        Eltern-Element
        <div class="child-blue">1</div>
        <div class="child-red">2</div>
      </div>
    
  

Erklärung des Codes:

• .parent: Element mit position: relative; und z-index: 10;, das einen neuen Schichtkontext erstellt
• .child-blue: Element mit position: absolute; und z-index: 1;, das sich in einem neuen Schichtkontext befindet, der durch das übergeordnete Element erstellt wird
• .child-red: Element mit position: absolute; und z-index: 2;, das sich ebenfalls in einem neuen Schichtkontext befindet, der durch das übergeordnete Element erstellt wird, und über .child-blue liegt

2.3 Interaktion der Schichtkontexte

Elemente innerhalb eines Schichtkontexts können nicht über Elemente aus einem anderen Schichtkontext gelegt werden, wenn nicht die Reihenfolge der Kontexte selbst geändert wird. Das bedeutet, dass Elemente mit einem höheren z-index innerhalb eines Schichtkontexts immer über Elemente mit einem niedrigeren z-index im selben Kontext angezeigt werden.

Beispiel für die Interaktion von Schichtkontexten:

    
      .wrapper {
        min-height: 500px;
      }

      .container1 {
        position: relative;
        z-index: 10;
        padding: 20px;
        margin-bottom: 200px;
        background-color: lightgrey;
      }

      .container2 {
        position: relative;
        z-index: 20;
        padding: 20px;
        background-color: lightpink;
      }

      .box {
        position: absolute;
        min-width: 125px;
        min-height: 125px;
        color: white;
      }

      .box1 {
        z-index: 1;
        top: 50px;
        left: 50px;
        background-color: red;
      }

      .box2 {
        z-index: 2;
        top: 100px;
        left: 100px;
        background-color: blue;
      }
    
  

    
      <div class="wrapper">
        <div class="container1">
          <div class="box box1">Box 1</div>
          <div class="box box2">Box 2</div>
        </div>

        <div class="container2">
          <div class="box box1">Box 3</div>
          <div class="box box2">Box 4</div>
        </div>
      </div>
    
  

In diesem Beispiel wird der Container .container2 mit z-index: 20; über dem Container .container1 mit z-index: 10; angezeigt. Die Elemente innerhalb jedes Containers werden entsprechend ihrem z-index verteilt, jedoch nicht von Elementen aus dem anderen Container überlagert werden.

2.4 Negative Werte von z-index

z-index kann negative Werte annehmen, was es ermöglicht, Elemente unterhalb anderer Elemente mit einem Null- oder positivem z-index-Wert zu positionieren.

    
      .container {
        min-height: 300px;
      }

      .box {
        position: absolute;
        min-width: 125px;
        min-height: 125px;
        color: white;
      }

      .box1 {
        z-index: -1;
        top: 100px;
        left: 100px;
        background-color: #3498db;
      }

      .box2 {
        z-index: 0;
        top: 150px;
        left: 150px;
        background-color: #e74c3c;
      }
    
  

    
      <div class="container">
        <div class="box box1">-1</div>
        <div class="box box2">0</div>
      </div>
    
  

Erklärung des Codes:

• .box1: Element mit z-index: -1;, das unterhalb des Elements mit z-index: 0; liegt

Tipps zur Verwendung von z-index:

• Minimiere den Einsatz von z-index: Versuche, z-index nur dann zu verwenden, wenn es wirklich notwendig ist. Dies hilft, komplexe und verwirrende Überlagerungsstrukturen zu vermeiden.
• Erstelle Schichtkontexte bewusst: Das Erstellen neuer Schichtkontexte hilft, die Überlagerung von Elementen zu steuern, kann aber die Dokumentstruktur komplizieren.
• Verwende semantisch sinnvolle z-index-Werte: Weisen Sie z-index-Werte sinnvoll zu, z.B. verwenden Sie positive Werte für obere Elemente und negative für untere.