Nachdem Sie diesen Artikel gelesen haben, werden Sie in der Lage sein, überlappende Divs mit CSS zu erstellen. Dazu lernen wir zunächst die „ Position ' und ' z-index ' Eigenschaften.
Lass uns anfangen!
CSS-Eigenschaft „position“.
In HTML können Sie die Position der Elemente festlegen, indem Sie das „ Position ' Eigentum. Die endgültige Position eines Elements auf einer Webseite wird durch seine rechte, linke, obere, untere und in Kombination mit den Z-Index-Eigenschaften bestimmt.
Syntax
Die Syntax der Positionseigenschaft lautet:
Position : Wert
Anstelle von ' Wert “, können Sie verschiedene Positionen von Elementen festlegen, z. B. absolut, relativ, fest und klebrig.
CSS-Eigenschaft „z-index“.
Das ' z-index ”-Eigenschaft wird verwendet, um die Stapelreihenfolge von Elementen festzulegen. Das Element mit dem größeren Z-Index-Wert wird vor den anderen platziert.
Syntax
Die Syntax der Eigenschaft z-index lautet wie folgt:
z-index : Auto |NummerIn der oben angegebenen Syntax „ Auto “ wird verwendet, um die Reihenfolge gemäß dem übergeordneten Element festzulegen, während für die manuelle Sequenz das „ Nummer ” wird als Wert der Eigenschaft z-index gesetzt.
Kommen wir nun zum praktischen Beispiel der Erstellung überlappender Divs mit CSS.
Beispiel 1: Überlappung des zweiten Div mit dem ersten
Im HTML-Abschnitt erstellen wir zwei divs und weisen ihnen unterschiedliche Klassennamen zu als „ div1 ' und ' div2 “.
HTML
< Karosserie >< div Klasse = 'div1' >< / div >
< div Klasse = 'div2' >< / div >
< / Karosserie >
Wechseln Sie nun zum CSS und folgen Sie den angegebenen Anweisungen:
- Setzen Sie den Wert der Positionseigenschaft auf „ absolut ” für Ort div1 genau den Ort, an dem Sie wollen.
- Passen Sie die Höhe und Breite von div1 als „ 250px ' und ' 300px “.
- Der Wert des z-Index wird gesetzt als „ 1 “.
- Stellen Sie die Hintergrundfarbe von div1 als „ RGB(4, 3, 75) “.
CSS
.div1 {Position : absolut ;
Höhe : 250px ;
Breite : 300px ;
z-index : 1 ;
Hintergrund : rgb ( 4 , 3 , 75 ) ;
}
Ausgabe
Das erste div wurde erfolgreich platziert. Jetzt bewegen wir uns zum zweiten div.
Um div2 zu überlappen, befolgen Sie die angegebenen Anweisungen:
- Stellen Sie den Wert der Positionseigenschaft, Breite und Höhe von div2 auf denselben Wert wie „ div1 “.
- Stellen Sie den Wert des z-Index als „ zwei ” um es vor dem ersten div zu platzieren.
- Stellen Sie eine andere Hintergrundfarbe für div2 als „ RGB(0, 204, 255) “.
- Stellen Sie den Rand von div2 als „ 50px ” als Rand-oben- und Rand-links-Wert.
- Legen Sie die Deckkraft von div2 fest als „ 0,7 “.
CSS
.div2 {Position : absolut ;
Breite : 300px ;
Höhe : 250px ;
z-index : 3 ;
Hintergrund : rgb ( 0 , 204 , 255 ) ;
Rand : 50px ;
Opazität : 0,7 ;
}
Ausgabe
Div2 überschneidet sich erfolgreich mit div1.
Wenn Sie div1 über div zwei setzen möchten, müssen Sie nur den Wert des z-Index ändern. Sehen wir uns dazu ein Beispiel an.
Beispiel 2: Überlappung des ersten Div mit dem zweiten
In diesem Beispiel ändern wir den Wert des Z-Index beider Divs. In dem ' .div1 ” Klasse der CSS-Datei, legen Sie den Wert von “ z-index „Eigentum als“ zwei “:
z-index : zwei ;Danach im „ .div2 ” Klasse, legen Sie den Wert der “ z-index „Eigentum als“ 1 “:
z-index : 1 ;Als Ergebnis wird das erste div vor dem zweiten div platziert:
Wir haben die einfachste Methode zusammengestellt, um zwei überlappende Divs mit CSS zu erstellen.
Fazit
Das ' Position ' und ' z-index ”-Eigenschaft wird verwendet, um überlappende Divs in CSS zu erstellen. Standardmäßig ist der Wert des z-Index 1, was besagt, dass das neu erstellte div vor dem vorhandenen div platziert wird. Sie können jedoch einen beliebigen Wert gemäß Ihren Anforderungen angeben, um die überlappende Reihenfolge anzupassen. In diesem Artikel haben wir die Methoden zum Erstellen überlappender Divs mit CSS angeboten.