Steuerung der Überlagerung von Elementen entlang der Z-Achse in CSS

Die Reihenfolge der Überlagerung von Elementen kann mit der Eigenschaft z-index reguliert werden, die als Wert positive oder negative ganze Zahlen oder Null annimmt. Die Eigenschaft funktioniert nur für Elemente, bei denen der Wert position als absolute, fixed oder relative festgelegt ist.

Bei Verwendung dieser Eigenschaft lautet die Regel zur Überlagerung von Elementen wie folgt: weiter oben wird das Element angezeigt, dessen z-index-Wert größer ist.

Lassen Sie uns die Überlagerungsreihenfolge der Elemente aus dem vorherigen Beispiel ändern. Dazu weisen wir dem ersten Element einen z-index zu, der größer ist als der des zweiten, zum Beispiel so:

css#elem1 {
  z-index: 2;
}
#elem2 {
  z-index: 1;
}

Ergebnis der Codeausführung: