Warum funktioniert Z-Index nicht?

Das CSS “Z-Index”Bestimmt die Stapelreihenfolge des HTML -Elements. Wenn sein Wert steigt, wird es vor anderen Elementen vorgestellt. Standardmäßig hat jedes Element auf der Webseite eine statisch definierte Position. Das „Z-Index“ funktioniert jedoch nur an den positionierten Elementen.

Mit dieser Beschreibung führen Sie die mögliche Lösung für den Z-Index, das nicht funktioniert, ohne Probleme zu haben:

• Setzen Sie die Position des Elements.
• Elemente mit demselben Z-Index-Wert stapeln in der Reihenfolge des Aussehens.
• Festlegen der Stapelung des untergeordneten Elements im Verhältnis zu seinem Elternteil.

Voraussetzung: Erstellen Sie eine HTML -Seite

Machen Sie in der HTML vier “" Behälter. Fügen Sie zunächst ein "" -Tag und zuweisen Sie die Klasse zu "Main-1”Dazu. Fügen Sie im Inneren drei Kinder hinzu, die Klassen mit Klassen haben “Sub-Main-1","Sub-Main-2", Und "Sub-Main-3”:

Elternteil
1
2
3

In CSS stylen Sie die „“ Elemente, um ihre Formen zu verändern.

Stil „Main-1“ -Klasse

.main-1
Breite: 150px;
Höhe: 150px;
Hintergrundfarbe: Bisque;
Rand: 50px Auto;
Position: Relativ;

Hier:

• “Breite”Bestimmt die Breite des Elements.
• “Höhe”Legt die Größe des Elements fest.
• “Hintergrundfarbe”Wendet die Hintergrundfarbe des Elements an.
• “Rand”Fügt Platz um das Element hinzu.
• “Position"Mit dem Wert"relativ”Platziert das Element relativ zu seiner aktuellen Position.

Stil „Sub-Main-1“ -Klasse

Der "Sub-Main-1Die Klasse wird mit den folgenden Eigenschaften gestaltet, um eine Kiste 1 zu erstellen:

.Sub-Main-1
Breite: 150px;
Höhe: 150px;
Hintergrundfarbe: CadetBlue;
Position: absolut;
Top: 30px;
links: 20px;

Hier:

• “Position"Mit dem Wert"absolutPositioniert das Element nach seinem übergeordneten positionierten Element.
• “Spitze" Und "links”Werden verwendet, um Platz am oberen und links des Elements hinzuzufügen.

Stil „Sub-Main-2“ -Klasse

Für Kasten 2 werden die folgenden Stile angewendet:

.Sub-Main-2
Breite: 150px;
Höhe: 150px;
Hintergrundfarbe: RGB (223, 134, 186);
Position: absolut;
Oben: 60px;
links: 50px;

Stil „Sub-Main-3“ -Klasse

Die folgenden CSS -Eigenschaften werden angewendet, um Kasten 3 zu machen:

.Sub-Main-3
Breite: 150px;
Höhe: 150px;
Hintergrundfarbe: RGB (210, 243, 186);
Position: absolut;
Oben: 90px;
Links: 80px;

Die vier Boxen wurden erfolgreich erstellt und befinden sich in natürlicher Stapelreihenfolge:

Setzen Sie die Position des Elements

Das Wichtigste zu berücksichtigen ist, dass das “Z-IndexEigentum arbeitet nur mit positionierten Elementen. Fügen Sie die Eigenschaft "Z-Index" mit einem beliebigen Wert hinzu, wie z. B. "1”. Also, wenn wir die "entfernen"Position”Eigentum aus dem“Sub-Main-2”Klasse, die“Z-IndexEigentum funktioniert nicht:

Elemente mit demselben Z-Index-Wert stapeln in der Reihenfolge des Aussehens

Wenn alle Elemente mit demselben angepasst werden “Z-IndexWert, sie alle werden in ihrer Reihenfolge des Aussehens stapeln. Erhöhen Sie daher den Wert der Eigenschaft „Z-Index“ des Elements, das Sie vor allen anzeigen möchten.

Lassen Sie es uns mit Hilfe eines Beispiels implementieren:

Elternteil 1
Kind 1
Kind 2

Weisen Sie in CSS jede Klasse die Eigenschaft "Z-Index" mit dem Wert "1" mit "Z-Index" zu. Die Webseite sieht folgendermaßen aus:

Festlegen der Stapelung des untergeordneten Elements im Verhältnis zu seinem Elternteil

Die Kinder des übergeordneten Elements stapeln relativ zu seinem übergeordneten Element. Sie werden die Stapelreihenfolge des anderen Geschwisterelements nicht beeinflussen.

Analysieren Sie das folgende Beispiel für ein gutes Verständnis.

Erstellen Sie eine HTML -Datei

• Zuerst fügen Sie eine "hinzu"”Element für übergeordnete 1 und zuweisen Sie ihm eine Klasse“Main-1”.
• Fügen Sie im Inneren "" Elemente für das Kind Kind 1, Kind 2 und Modal Layer hinzu.
• Fügen Sie am Ende ein "" Element für Eltern 2 hinzu 2:

Elternteil 1
Kind 1
Kind 2


Elternteil 2

Setzen Sie die “Main-1" Klasse "Z-Index"Wert als"2”:

Z-Index: 2;

Stil „Kindermodal“ Klasse

.Kindermodal
Position: fest;
Oben: 0px;
links: 0px;
Breite: 100%;
Höhe: 100VH;
Z-Index: 100;
Hintergrundfarbe: RGBA (0, 0, 0, 0, 0.295);

Der "Kindermodal"Klasse"Z-Index"Wert wird als" festgelegt "100”, Was bedeutet, dass es vor seinen Geschwistelelementen stehen muss.

Setzen Sie die “Z-Index"Wert der"Sub-Main-2" Klasse "5”:

Z-Index: 5;

Setzen Sie die “Z-Index"Wert der"Main-2" Klasse "3”:

Z-Index: 3;

Wir können aus dem folgenden Bild beobachten, dass das Geschwister “Main-2"Des übergeordneten Elements steht vor dem"Main-1"Elternteil, obwohl eines der Kinderelemente eine größere hat"Z-Index" Wert. Dies liegt daran, dass die übergeordnete "main-1" -Klasse den Eigenschaftswert "2" "Z-Index" und das "Main-2" einen "Z-Index" -Wert "3" hat:

Dies sind die Gründe, warum der Z-Index nicht funktioniert.

Abschluss

Der "Z-Index"Eigentum arbeitet an den positionierten Elementen, wie die Elemente mit"Position" Eigentum "absolut","Fest", oder mehr. Wenn der "z-Index" -Wert des übergeordneten Elements geringer ist als sein Geschwisterelement und das Kind des ehemaligen übergeordneten Elements einen größeren "Z-Index" -Stwert hat, wird das Geschwisterelement-Element vor allen angezeigt. Diese Beschreibung hat die Eigenschaft „Z-Index“ besprochen und warum es nicht funktioniert.