Z-Index#

Mittels z-index kann die Reihenfolge einzelner Elemente geändert werden. Elemente die später im HTML erscheinen, liegen über anderen Elementen.

Per Voreinstellung liegen absolut, fixed und relativ positionierte Elemente in der Reihenfolge übereinander, in der sie im Quelltext des HTML-Dokuments stehen – das zuletzt aufgeführte Element liegt oben.

CSS z-index kann diese Reihenfolge ändern und z.B. ein Element, das im Quelltext vor allen anderen Elementen liegt, über die folgenden Elemente anheben.

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

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

See the Pen z-index by csswebsite (@csswebsite) on CodePen.