So erstellen Sie überlappende Divs mit CSS

In CSS können Sie überlappende Divs erstellen, indem Sie die “verwendenPosition" Und "Z-Index" Eigenschaften. Die CSS-Position Eigenschaft legt die Position des DIV oder des Containers fest, während die Z-Index-Eigenschaft verwendet werden kann, um die DIV-Sequenz zu definieren. In einem solchen Szenario wird der DIV den größeren Wert des Z-Index vor dem zweiten mit platziert.

Infolge des Lesens dieses Artikels können Sie überlappende Divs mit CSS erstellen. Zu diesem Zweck werden wir zunächst etwas über das erfahren “Position" Und "Z-Index" Eigenschaften.

Lass uns anfangen!

CSS -Position „Position“

In HTML können Sie die Position der Elemente einstellen, indem Sie das verwenden “Position" Eigentum. Die endgültige Position eines Elements auf einer Webseite wird durch die rechte, linke, oben, unten und in Kombination mit den Z-Index-Eigenschaften bestimmt.

Syntax

Die Syntax der Positionseigenschaft ist:

Position: Wert

Anstelle von "Wert”, Sie können verschiedene Positionen von Elementen wie Absolut, Relativ, Fix und klebrig festlegen.

CSS "Z-Index" Eigenschaft

Der "Z-IndexDie Eigenschaft wird verwendet, um die Stapelreihenfolge der Elemente festzulegen. Das Element mit dem größeren Wert von Z-Index wird vor den anderen platziert.

Syntax

Die Syntax der Z-Index-Eigenschaft lautet wie folgt:

Z-Index: Auto | Nummer

In der oben gegebenen Syntax, “Auto”Wird verwendet, um Reihenfolge nach dem übergeordneten Element festzulegen, während für die manuelle Sequenz die“Nummer”Wird als Wert der Z-Index-Eigenschaft eingestellt.

Wechseln wir nun zum praktischen Beispiel, um überlappende Divs mit CSS zu erstellen.

Beispiel 1: Überlappende zweite Div mit dem ersten

Im Abschnitt HTML erstellen wir zwei Divs und weisen verschiedene Klassennamen als “zu“ zuDiv1" Und "Div2”.

Html

Gehen Sie nun in die CSS und befolgen Sie die angegebenen Anweisungen:

• Legen Sie den Wert der Positionseigenschaft als “fest“absolut”Für Platz Div1 genau der Ort, an dem Sie wollen.
• Stellen Sie die Höhe und Breite des Div1 als "als" ein. "250px" Und "300px”.
• Der Wert des Z-Index wird als "festgelegt"1”.
• Stellen Sie die Hintergrundfarbe des Div1 als "als" einRGB (4, 3, 75)”.

CSS

.div1
Position: absolut;
Höhe: 250px;
Breite: 300px;
Z-Index: 1;
Hintergrund: RGB (4, 3, 75);

Ausgang

Die erste DIV ist erfolgreich platziert. Jetzt bewegen wir uns zum zweiten Div.

Um die Div2 zu überlappen, befolgen Sie die angegebenen Anweisungen:

• Legen Sie den Wert der Positionseigenschaft, Breite und Höhe des Div2 fest wie die “Div1”.
• Legen Sie den Wert des Z-Index als “fest“2”Vor dem ersten Div platzieren.
• Setzen Sie eine andere Hintergrundfarbe für den Div2 als “RGB (0, 204, 255)”.
• Setzen Sie den Rand von Div2 als "50px”Als Margen- und Marge-Links-Wert.
• Setzen Sie die Deckkraft von Div2 als "0.7”.

CSS

.div2
Position: absolut;
Breite: 300px;
Höhe: 250px;
Z-Index: 3;
Hintergrund: RGB (0, 204, 255);
Rand: 50px;
Deckkraft: 0.7;

Ausgang

Div2 überschneidet sich erfolgreich mit Div1.

Wenn Sie Div1 auf Div zwei festlegen möchten, müssen Sie nur den Wert des Z-Index ändern. Lassen Sie uns ein Beispiel dafür sehen.

Beispiel 2: Überlappung der ersten Div mit dem zweiten

In diesem Beispiel werden wir den Wert des Z-Index beider Divs ändern. Im ".Div1"Klasse der CSS -Datei, legen Sie den Wert von" fest "Z-IndexEigentum als "2”:

Z-Index: 2;

Danach in der “.Div2”Klasse, setzen Sie den Wert der“Z-IndexEigentum als "1”:

Z-Index: 1;

Infolgedessen wird die erste DIV vor dem zweiten DIV platziert:

Wir haben die einfachste Methode zusammengestellt, um zwei überlappende Divs mit CSS zu erstellen.

Abschluss

Der "Position" Und "Z-IndexEigenschaft wird verwendet, um überlappende Divs in CSS zu erstellen. Standardmäßig ist der Wert des Z-Index 1, der besagt. Sie können jedoch jeden Wert gemäß Ihren Anforderungen angeben, um die überlappende Sequenz anzupassen. In diesem Artikel haben wir die Methoden zum Erstellen überlappender Divs mit CSS angeboten.