Was ist Z-Index-Eigenschaft in CSS?

Cascading Style Sheets (CSS) liefert eine humorvolle Reihe von Eigenschaften, in denen festgelegt wird, wie HTML-Elemente auf Webseiten angezeigt werden. Zum Beispiel definiert die Anzeigeeigenschaft das Anzeigenverhalten von Elementen, Position Eigenschaft gibt die Position von Elementen an, die Hintergrundfarbe bietet Hintergrundinformationen. Farbe zu Elementen, und die Liste geht weiter. Diese Beschreibung wurde speziell entwickelt, um die Bedeutung der Z-Index-Eigenschaft in CSS hervorzuheben.

In HTML haben Elemente eine bestimmte Stapelreihenfolge, die die Anordnung festlegt, in der Elemente positioniert sind. Die für die Elementpositionierung definierte Regel ist, dass das Element mit einer höheren Stapelreihenfolge vor dem Element mit niedrigerer Stapelreihenfolge positioniert ist. Eine Stapelordnung eines Elements kann sowohl positive als auch negative Werte aufweisen.

Was ist Z-Index-Eigenschaft in CSS

Die Z-Index-Eigenschaft definiert die Stapelreihenfolge von HTML-Elementen so, dass sie angibt, welches Element voran angezeigt wird und welches Element im Hintergrund angezeigt wird.

Syntax

Z-Index: Wert;

Die Z-Index-Eigenschaft kann bestimmte Eigenschaften aufweisen, die im Folgenden ausführlich erläutert werden.

Wert	Beschreibung
Auto	Dieser Wert legt die Stapelreihenfolge der Elemente fest, die der ihrer übergeordneten Elemente entspricht.
Nummer	Dieser Wert wird verwendet, um einem Element manuell eine Stapelreihenfolge zu geben. Die Stapelordnung kann sowohl positive als auch negative Werte aufweisen.
Initial	Dieser Wert legt die Stapelreihenfolge eines Elements auf seinen Standardwert fest.
erben	Dieser Wert legt die Stapelreihenfolge eines Elements gemäß den Eigenschaften fest, die das Element aus seinem übergeordneten Element geerbt hat.

Hier haben wir die Z-Index-Eigenschaft mit Hilfe einiger Beispiele illustriert.

Beispiel 1

Angenommen, Sie möchten ein Hintergrundbild auf Ihrer Website bereitstellen und möchten, dass Ihre anderen Elemente vor diesem Bild angezeigt werden. Verwenden Sie den folgenden Code -Snippet.

Html

Der Morgenspaziergang ist für die Gesundheit von Vorteil

Im obigen Beispiel gibt es zwei Elemente, die eins ist

Element und das andere ist ein Element.

CSS

H2
Position: Relativ;
links: 200px;
Oben: 0px;

img
Z -Index: -1;
Position: absolut;
links: 200px;
Oben: 0px;

Das Element ist im Hintergrund der positioniert

Element, weil die dem Element zugewiesene Z -Index -Eigenschaft -1 ist. Außerdem die

Das Element ist relativ 200px von links und 0px von oben positioniert, während das Element eine absolute Position hat, was bedeutet, dass es 200px von links und 0px von oben in Bezug auf die Position seines Vorfahrenelements platziert wird .

Ausgang

Hier ist eine Ausgabe des obigen Beispiels.

Beide Elemente wurden erfolgreich gestapelt.

Wenn wir nun den Z-Index-Wert aus dem Element entfernen, wird die vor dem platziert

Element, weil im Dokumentfluss zuletzt definiert ist.

img
/*Z -Index: -1;*/
Position: absolut;
links: 200px;
Oben: 0px;

Ausgang

Jetzt die

Element wird hinter dem Element platziert.

Beispiel 2

In diesem Beispiel haben wir die Verwendung eines positiven Z-Index-Werts gezeigt, und in diesem Beispiel haben wir darüber hinaus veranschaulicht. Hier werden zwei Elemente erstellt.

Html

Div 1
Div 2

Die erste DIV hat eine relative Position, was bedeutet, dass sie 20px von links und 10px von oben relativ zu seiner ursprünglichen Position positioniert wird. Darüber hinaus haben wir ihm einen Z-Index-Wert von 1 zugewiesen.

.div1
Z-Index: 1;
Position: Relativ;
links: 20px;
Top: 10px;
Grenze: 3px Festgrau;
Höhe: 100px;
Breite: 300px;

Für das zweite Div haben wir ihm eine absolute Position zugewiesen, was bedeutet, dass es 100px von links und 60 px von oben in Bezug auf die Position seines übergeordneten Elements platziert wird.

.div2
Position: absolut;
Links: 100px;
Oben: 60px;
Hintergrundfarbe: Indianer;
Höhe: 80px;
Breite: 200px;

Ausgang

Div 2 erfolgreich hinter Div 1 gestapelt.

Punkte, die man sich merken sollte!

1. Sie müssen die Position von Elementen definieren, sonst funktioniert die Z-Index-Eigenschaft nicht. (Elemente können absolute, relative, feste oder klebrige Positionen haben).

2. Ohne die Z-Index-Eigenschaft anzugeben, ist das Element, das im Dokumentfluss zuletzt definiert ist.

Abschluss

Die Z-Index-Eigenschaft wird verwendet, um die Stapelreihenfolge von HTML-Elementen festzulegen, was bedeutet, dass die Anordnung der auf der Webseite angezeigten Elemente angibt. Die Z-Index-Eigenschaft weist vier Werte auf; Auto, das die Stapelreihenfolge von Elementen feststellt, die der ihrer übergeordneten Elemente entspricht Element gemäß den Eigenschaften, die das Element aus seinem übergeordneten Element geerbt hat. In diesem Beitrag werden die Z-Index-Eigenschaft mit Hilfe geeigneter Beispiele eingehend erörtert.