Bringen Sie ein Element mit CSS in den Vordergrund
Wenn ein Element nicht so eingestellt ist, dass es die gesamte Anzeigefläche abdeckt, kann es mit der Eigenschaft z-index in den Vordergrund geholt werden. Die Eigenschaft z-index bestimmt die Stapelreihenfolge der Elemente auf der Seite.
Elemente mit einem höheren z-index werden auf dem Deckel von Teilen mit einem niedrigeren z-index gestapelt.
Bringen Sie Elemente mit CSS in den Vordergrund
Es gibt mehrere Möglichkeiten, ein Element mit CSS in den Vordergrund zu bringen. Die erste Möglichkeit besteht darin, die Eigenschaft z-index zu verwenden, die die z-Reihenfolge eines Elements angibt und bestimmt, welches Element oben gestapelt wird.
Elemente mit einem höheren z-index werden immer auf Elemente mit einem niedrigeren z-index gestapelt. Um also ein Element nach vorne zu bringen, würden Sie ihm einen höheren z-index geben als jedem anderen Element auf der Seite.
Eine andere Möglichkeit, ein Element nach vorne zu bringen, ist die Verwendung der Eigenschaft position.
Angenommen, ein Element hat einen position-Wert von absolut oder relativ. In diesem Fall kann es zur Show gebracht werden, indem seine Eigenschaft z-index auf einen Wert gesetzt wird, der größer ist als der jedes anderen Elements auf der Seite.
Zuletzt können Sie mit der Eigenschaft transform ein Element in den Vordergrund holen. Mit der Eigenschaft transformieren können Sie ein Element verschieben, drehen, skalieren und neigen.
Um ein Element nach vorne zu bringen, würden Sie es um einen Wert übersetzen, der größer ist als alle anderen Elemente auf der Seite.
Fügen Sie z-index in CSS hinzu
Die CSS-Eigenschaft z-index kann nützlich sein, um Dropdown-Menüs zu erstellen oder sicherzustellen, dass einige Aspekte Ihrer Seite immer sichtbar sind.
Der Wert, den Sie für den z-index festlegen, bestimmt die Position des Elements in der Ebenenreihenfolge. Wenn Sie beispielsweise einen z-index auf 1 setzen, wird das Element auf der unteren Ebene platziert, während ein z-index auf 10 das Element auf der obersten Ebene platziert.
z-index: -1;
Denken Sie daran, dass die Eigenschaft z-index nur bei Elementen mit einem position-Wert von absolute, relative oder fixed funktioniert. Wenn Sie versuchen, z-index auf ein Element mit einem position-Wert von static zu verwenden, wird dies keinen Effekt erzeugen.
Fügen Sie z-index zu Element mit Flexbox hinzu
Ein einfacher Ansatz ist das Hinzufügen des z-index zu einem Element mit einer Flexbox.
-
Zuerst müssen Sie den
z-indexdes Elements auf einen Wert setzen, der grösser ist als derz-indexder anderen Elemente im Flex-Container. -
Wählen Sie die
positiondes Elements aufabsolut. -
Abschließend müssen Sie die Eigenschaften
topundleftauf0setzen.
Beispielcode:
<!DOCTYPE html>
<html>
<head>
<style>
img {
position: absolute;
left: 0px;
top: 0px;
z-index: -1;
}
</style>
</head>
<body>
<h1>The z-index Property</h1>
<img src="/img/DelftStack/logo.png" width="100" height="140" />
<p>Since the image has a z-index value of -1, it will be positioned behind the heading.</p>
</body>
</html>
Stellen Sie sicher, dass Sie dem img-Tag <img src="image.jpg" width="100" height="140"> ein Bild hinzufügen, um die Effekte zu sehen.
Abschluss
Zusammenfassend lässt sich sagen, dass es verschiedene Möglichkeiten gibt, ein Element mit CSS in den Vordergrund zu bringen. Die Standardpraxis ist die Verwendung der Eigenschaft z-index, aber Sie können auch die Eigenschaften position oder transform verwenden.
Zeeshan is a detail oriented software engineer that helps companies and individuals make their lives and easier with software solutions.
LinkedIn