CSS z-index – Sichtposition bei Überlagerung von Elementen

Mit der CSS Eigenschaft z-index ist es möglich, die Sichtposition von Elementen festzulegen, wenn sich diese überlagern / überlappen.
Normal ist das in HTML zuletzt eingeletete Element das, was oben liegt, wenn sich Elemente überlappen. Mit z-index kann aber entgegen gewirkt werden, um eine andere Reihenfolge festzulegen.
Überlappungen treten auf, wenn positionierte Elemente durch ihre Größe überlagert werden.

Beschreibung und Syntax zu CSS visibility

z-index: 2;
z-index: -1;

Erläuterung der Eigenschaften

Im Beispiel wurde z-index 2 sowie ein negativer z-index von -1 gewählt. Je höher der index-Wert, desto weiter oben wird das Element dargestellt. Der z-index geht dabei immer vom Eltern-Element aus. Unter Firefox wird ein negativer z-index unter dem Elternelement dargestellt. Bei einem -1 wird die Position vor dem in html vorherige festgelegtem Element auf gleiche Sichthöhe gesetzt, also der gleiche Index definiert. Jede Ebene erhöht den z-index immer um einen Wert.

Informationen und Werte

Vererbbar: Nein
Initialwert: auto (automatische Festlegung)
Werte: Ganzzahlen (auch negative), auto (automatische Festlegung wie im html Code festgelegte Reihenfolge)