Die Position von Elementen auf einer Webseite ist ein wichtiges Attribut, das von Entwicklern zugewiesen wird. Wenn Ihre Elemente nicht richtig platziert sind, kann es sein, dass sie unsinnig oder unorganisiert erscheinen. Daher ist es für Entwickler sehr wichtig, die Position jedes HTML-Elements mit Bedacht zuzuweisen.
Manchmal können sich Elemente überlappen, obwohl ihnen ihre jeweiligen Positionen zugewiesen wurden. Diese überlappenden Elemente können übereinander gestapelt werden und andere Elemente verbergen. Um dieses Problem zu lösen, stellt CSS die Z-Index-Eigenschaft für Webdesign bereit. In diesem Artikel lernen wir die Z-Index-Eigenschaft von CSS kennen. Wir werden auch die verschiedenen Werte des Z-Index und die Unterschiede zwischen ihnen diskutieren.
CSS können Entwickler die Reihenfolge der Elemente angeben, die sich auf der Z-Achse überlappen (d. h. auf dem Bildschirm oder außerhalb des Bildschirms). Das Z-Index-Attribut funktioniert jedoch nur bei Elementen, für die ein anderer Positionswert als „statisch“ angegeben ist.
Die Stapelebene eines HTML-Elements wird durch das Z-Index-Attribut bestimmt. Die Position eines Elements auf der Z-Achse wird als „Stapelebene“ bezeichnet (im Gegensatz zur X- oder Y-Achse). Wenn der Wert höher ist, wird das Element weiter oben in der Stapelreihenfolge platziert. Diese Stapelanordnung erfolgt senkrecht zum Ansichtsfenster oder Monitor.
Die natürliche Stapelreihenfolge der Komponenten auf der Z-Achse in einer HTML-Seite wird von einer Vielzahl von Faktoren beeinflusst. Dies sind Elemente mit negativem Stapelkontext, nicht positionierte, nicht schwebende Elemente auf Blockebene, nicht positionierte, schwebende Elemente, Inline-Elemente und positionierte Elemente, alle in der Anzeigereihenfolge.
element{
z-index: values;
}
Das Folgende sind die Werte dieses Attributs -
Auto – Die überlappende Reihenfolge entspricht dem Wert des übergeordneten Elements. Dies ist der Standardwert.
Zahlen – Überlappende Sequenzen werden als Zahlen angegeben, z. B. 1, 2, 3 usw.
Anfänglich – Bestellung auf Standard gesetzt.
Vererbung – Überlappungsreihenfolge wird vom übergeordneten Element geerbt.
<!DOCTYPE html>
<html>
<head>
<title>z-index property</title>
<style>
.demo1{
font-family: cursive, Cochin, Georgia;
background-color: red;
position: absolute;
top: 100px;
}
.demo2{
font-family: cursive, Cochin, Georgia;
background-color: #FFFF00;
position: absolute;
top: 100px;
left: 300px;
z-index: 2;
width: 200px;
}
</style>
</head>
<body>
<center>
<h2> z-index property </h2>
<div class= "demo1"> This is an example. </div>
<div class= "demo2"> This is an example. </div>
</center>
</body>
</html>
Der Auto-Wert des Z-Index-Attributs hat die gleiche Elementreihenfolge wie das übergeordnete Element.
<!DOCTYPE html>
<html>
<head>
<title>Auto value of z-index property</title>
<style>
.demo1{
font-family: verdana,'cursive';
background-color: #FFFF00;
position: absolute;
top: 120px;
z-index: auto;
}
.demo2{
font-family: cursive, Cochin, Georgia;
background-color: red;
position: absolute;
top: 200px;
z-index: auto;
}
</style>
</head>
<body>
<center>
<h2>z-index property</h2>
<p class= "demo1"> This is an example. </p>
<p class= "demo2"> This is an example. </p>
</center>
</body>
</html>
Der Nullwert des Z-Index-Attributs ist der numerische Wert der Elementreihenfolge. Geben Sie einen Z-Index-Wert von 0 an, um gestapelte Inhalte zu erstellen. Wenn wir beispielsweise zwei Elemente Element1 und Element2 haben, sind ihre Z-Indizes 1 bzw. 0. Daher wird Element 1 auf Element 2 gestapelt. Und wenn ihre Z-Indizes -1 bzw. 0 wären, würde Element 1 unter Element 2 gestapelt. Betrachten Sie das folgende Beispiel.
<!DOCTYPE html>
<html>
<head>
<title>Zero value of z-index property</title>
<style>
.demo1{
font-family: cursive, Cochin, Georgia;
background-color: #FF0000;
position: absolute;
top: 120px;
z-index: 0;
}
.demo2{
font-family: cursive, Cochin, Georgia;
background-color: red;
position: absolute;
top: 100px;
left: 300px;
z-index: 0;
width: 200px;
}
</style>
</head>
<body>
<h1>Tutorialspoint</h1>
<h2>z-index property</h2>
<p class= "demo1">This is an example.</p>
<p class= "demo2">This is an example.</p>
</body>
</html>
Der Wert des Z-Index-Attributs stimmt normalerweise nicht mit dem Auto-Wert überein.
<!DOCTYPE html>
<html>
<head>
<title>No value for z-index property</title>
<style>
.demo{
font-family: cursive, Cochin, Georgia;
background-color: #FFFF00;
position: absolute;
top: 120px;
}
</style>
</head>
<body>
<h2>z-index property</h2>
<p class= "demo">This is an example.</p>
</body>
</html>
Ein herausforderndes Thema ist das Stapeln von Kontexten in CSS. In diesem Artikel beschreiben wir umfassend, wie sich der Z-Index auf den Stapelkontext auf einer Webseite auswirkt, was sich, wenn es vollständig verstanden wird, in leistungsstarke CSS-Eigenschaften niederschlägt. Da sie nun mit dieser Funktion vertraut sind, sollten neue Entwickler in der Lage sein, sie effektiv zu nutzen und einige häufig auftretende Probleme zu vermeiden. Fortgeschrittene Entwickler sollten sich auch darüber im Klaren sein, wie die richtige Anwendung von Z-Index verschiedene Layout-Herausforderungen lösen und eine Vielzahl kreativer CSS-Designoptionen bieten kann.
Das obige ist der detaillierte Inhalt vonUnterschied zwischen Auto, 0 und keinem Z-Index. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
![[Web-Frontend] Node.js-Schnellstart](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
