Inhaltsverzeichnis
Was ist das Z-Index-Attribut?
Grammatik
Beispiel
Automatischer Wert für Z-Index-Attribut
Nullwert für Z-Index-Attribut
Z-Index-Attribut hat keinen Wert
Fazit
Heim Web-Frontend CSS-Tutorial Unterschied zwischen Auto, 0 und keinem Z-Index

Unterschied zwischen Auto, 0 und keinem Z-Index

Aug 31, 2023 pm 11:41 PM

auto、0 和无 z-index 之间的区别

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.

Was ist das Z-Index-Attribut?

Mit der Z-Index-Eigenschaft von

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.

Grammatik

element{
   z-index: values;
}
Nach dem Login kopieren

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.

Beispiel

<!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>
Nach dem Login kopieren

Automatischer Wert für Z-Index-Attribut

Der Auto-Wert des Z-Index-Attributs hat die gleiche Elementreihenfolge wie das übergeordnete Element.

Beispiel

<!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>
Nach dem Login kopieren

Nullwert für Z-Index-Attribut

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.

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>
Nach dem Login kopieren

Z-Index-Attribut hat keinen Wert

Der Wert des Z-Index-Attributs stimmt normalerweise nicht mit dem Auto-Wert überein.

Beispiel

<!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>
Nach dem Login kopieren

Fazit

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!

Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Heiße Artikel -Tags

Notepad++7.3.1

Notepad++7.3.1

Einfach zu bedienender und kostenloser Code-Editor

SublimeText3 chinesische Version

SublimeText3 chinesische Version

Chinesische Version, sehr einfach zu bedienen

Senden Sie Studio 13.0.1

Senden Sie Studio 13.0.1

Leistungsstarke integrierte PHP-Entwicklungsumgebung

Dreamweaver CS6

Dreamweaver CS6

Visuelle Webentwicklungstools

SublimeText3 Mac-Version

SublimeText3 Mac-Version

Codebearbeitungssoftware auf Gottesniveau (SublimeText3)

Hinzufügen von Kastenschatten zu WordPress -Blöcken und -Elementen Hinzufügen von Kastenschatten zu WordPress -Blöcken und -Elementen Mar 09, 2025 pm 12:53 PM

Hinzufügen von Kastenschatten zu WordPress -Blöcken und -Elementen

Erstellen Sie ein JavaScript -Kontaktformular mit dem Smart Forms Framework Erstellen Sie ein JavaScript -Kontaktformular mit dem Smart Forms Framework Mar 07, 2025 am 11:33 AM

Erstellen Sie ein JavaScript -Kontaktformular mit dem Smart Forms Framework

Erstellen Sie einen Inline -Texteditor mit dem inhaltlichen Attribut Erstellen Sie einen Inline -Texteditor mit dem inhaltlichen Attribut Mar 02, 2025 am 09:03 AM

Erstellen Sie einen Inline -Texteditor mit dem inhaltlichen Attribut

Machen Sie Ihren ersten Seltsamen -Sufle -Übergang Machen Sie Ihren ersten Seltsamen -Sufle -Übergang Mar 15, 2025 am 11:08 AM

Machen Sie Ihren ersten Seltsamen -Sufle -Übergang

Datei hochladen mit Multer in node.js und ausdrücken Datei hochladen mit Multer in node.js und ausdrücken Mar 02, 2025 am 09:15 AM

Datei hochladen mit Multer in node.js und ausdrücken

Vergleich der 5 besten PHP -Formbauer (und 3 kostenlose Skripte) Vergleich der 5 besten PHP -Formbauer (und 3 kostenlose Skripte) Mar 04, 2025 am 10:22 AM

Vergleich der 5 besten PHP -Formbauer (und 3 kostenlose Skripte)

Beste CSS -Animationen und Effekte auf Codecanyon 2025 (kostenlos bezahlt) Beste CSS -Animationen und Effekte auf Codecanyon 2025 (kostenlos bezahlt) Mar 01, 2025 am 09:32 AM

Beste CSS -Animationen und Effekte auf Codecanyon 2025 (kostenlos bezahlt)

Entmystifizierende Bildschirmleser: Zugrunde Formen und Best Practices Entmystifizierende Bildschirmleser: Zugrunde Formen und Best Practices Mar 08, 2025 am 09:45 AM

Entmystifizierende Bildschirmleser: Zugrunde Formen und Best Practices

See all articles