z-index

Der z-index steuert die Stapelreihenfolge von Elementen, also welches Element optisch über einem anderen liegt.

Damit diese Reihenfolge überhaupt beeinflusst werden kann, muss ein Element eine Positionierung wie relative, absolute, fixed oder sticky besitzen – nur dann entsteht ein sogenannter „Stacking Context“, in dem z-index wirkt. Standardmäßig werden Elemente in der Reihenfolge ihres HTML-Vorkommens übereinander gelegt, sodass später definierte Elemente über früheren erscheinen.

Mit z-index kann diese natürliche Reihenfolge gezielt verändert werden. Ein Element mit höherem z-index wird im gleichen Stacking Context über Elemente mit niedrigerem Wert gelegt. Dadurch lässt sich

.bild1 {
  position: relative;
  z-index: 2;
}

.bild2 {
  position: relative;
  right: 50px;
  top: 100px;
}