Überlagerung mehrerer Block-Elemente mit der Eigenschaft position

Websites haben nicht nur eine x- und y-Achse, sondern auch eine z-Achse. Das macht sich vor allem bei Elementen bemerkbar, denen die Eigenschaft position zugewiesen wurde. Hierbei kann es vorkommen, dass sie sich überlappen.

Überlagerung mehrerer Block-Elemente mit der Eigenschaft position

Normalerweise werden die positionierten Elemente in der Reihenfolge des Vorkommens im Quellcode übereinander gelegt. Die danach vorkommenden Elemente liegen dabei über den Elementen, die zuvor eingefügt wurden. Mit der Eigenschaft z-index kann die Reihenfolge der Überlappungen festgelegt werden. Die Syntax ist nachfolgend mit einem Beispiel abgebildet.

CSS-Code für z-index

Wert für die Eigenschaft z-index

Folgende Werte können für den z-index festgelegt werden.

  • auto (Standardeinstellung, Reihenfolge wird auf den Wert des Elternelements gesetzt)
  • <Zahl> (Das Element mit der größten Zahl liegt oben, mit der niedrigsten Zahl unten)
  • initial (Setzt auf den Standardwert)
  • inherit (Geerbt vom Elternelement)

In der Regel reicht es aus, für jedes Element eine unterschiedlich Zahl anzugeben und so die Reihenfolge aufsteigend von der untersten bis zur obersten Lage festzulegen.

Beispiel mit z-index

Beim folgenden Beispiel werden die DIV-Elemente im HTML-Quellcode in der Reihenfolge 3, 1, 2 eingefügt. Die Überlappung ist wie in den CSS-Regeln angegeben in der Reihenfolge 1, 2, 3.

.selektor1 { 
width: 300px;
height: 200px;
position: absolute;
top: 40px;
left: 40px;
z-index: 1;
background-color: green;
}

.selektor2 { 
width: 300px;
height: 200px;
position: absolute;
top: 80px;
left: 80px;
z-index: 2;
background-color: blue;
}

.selektor3 { 
width: 300px;
height: 200px;
position: absolute;
top: 120px;
left: 120px;
z-index: 3;
background-color: red;
}
<div class="selektor3">Inhalt3</div>
<div class="selektor1">Inhalt1</div>
<div class="selektor2">Inhalt2</div>

Die Ansicht der verschiedenen DIV-Elemente sieht bei dem Code wie folgt aus.

Reihenfolge mit z-index

In Verbindung mit position und z-index ist es möglich, die Elemente außerhalb des normalen Flusses zu positionieren und überlappen zu lassen und dabei die Reihenfolge der einzelnen Lagen festzulegen.