Mastering Z-Index in CSS

Z-Index-Attribut in CSS: Ein leistungsstarkes Tool zur Steuerung der Reihenfolge der Seitenelemente Stapel

In diesem Artikel wird das Attribut z-index in CSS untersucht, mit dem die Kaskadenreihenfolge von Seitenelementen gesteuert wird. Elemente mit höheren Werten werden auf Elementen mit niedrigeren Werten angezeigt. Dies ähnelt der X-Achse und der y-Achse auf der Seite, die die horizontalen und vertikalen Positionen von Elementen steuert, und steuert die Stapelreihenfolge der Elemente auf der Z-Achse. z-index

Schlüsselpunkte:

Das Attribut

in
• steuert die Stapelreihenfolge der Seitenelemente. Es funktioniert nur auf Elementen, deren Attributwerte z-index, position oder absolute sind. relative fixed durch Einstellen
ohne Werte an
• , position: relative, top, right oder bottom -attribute zuzuweisen, können Sie die Stapelreihenfolge der Elemente steuern, ohne ihre ursprüngliche Position auf dem zu ändern Seite. left Die Analyse des Werts
• wird im Kontext des übergeordneten Stapels durchgeführt, was bedeutet, dass das Element auch dann noch an anderer Stelle angezeigt wird, wenn der Wert des z-index des übergeordneten Containers niedrig ist Unter dem Element. z-index z-index Um die Organisation und Flexibilität zu verbessern, wird empfohlen, ein Inkrement von 100 zu verwenden, um den Wert
zu setzen. Dieser Ansatz bietet 99 verfügbare numerische Auswahlmöglichkeiten beim Hinzufügen einer neuen Ebene zwischen zwei vorhandenen Ebenen.
• z-index
Standard -Stapelauftrag

Beim Schreiben von HTML werden die Back -Elemente im Dokument standardmäßig auf den vorderen Elementen gestapelt.

In diesem HTML -Snippet wird die Fußzeile auf den Körpergehalt gestapelt, was wiederum auf dem Kopfball gestapelt wird.

<code class="language-html"><header class="site-header"></header>
<main class="site-content"></main>
<footer class="site-footer"></footer></code>

Elemente können durch Kombinieren von

-attributen und

, position, top, right, bottom> Offset -Attributen überlagert werden. left

Wenn das Attribut

jedes Elements auf position gesetzt ist, überlappen sie sich alle. Da die Fußzeile in dem Dokument zuletzt erscheint, wird er standardmäßig über die ersten beiden Elemente gestapelt. absolute

<code class="language-css">.site-header, .site-content, .site-footer {
  position: absolute;
  width: 400px;
  padding: 20px;
}
.site-header {top: 0; left: 0;}
.site-content {top: 50px; left: 50px;}
.site-footer {top: 100px; left: 100px;}</code>

Verwenden von Offseteigenschaften

und top, um die Stapelreihenfolge der Elemente klarer zu sehen. left

Stack Context

Obwohl überlappende Elemente mit

erstellt werden können, erstellt dies nicht den sogenannten position: absolute Stapelkontext .

Der Stapelkontext kann auf folgende Weise erstellt werden:

Das

-Element hat die Attribute
• oder position: absolute und der Wert relative ist nicht z-index. auto
Flexbox -Elemente haben
• Werte, die nicht auto sind. z-index Die Opazität des
Elements (
• ) beträgt weniger als 1. opacity Das
-Merkmal des
• -Elements wird auf einen Nicht-Wert eingestellt. transform none
Die gemeinsame Art, Stapelkontexte zu erstellen und zu verwenden, ist die erste. Konzentrieren wir uns darauf.

Gehen Sie zum vorherigen Beispiel zurück, wir haben drei Elemente, die sich gegenseitig überlappen, aber im Moment haben sie keine z-index -Werte.

Das Attribut

z-index ermöglicht es uns, die Stapelreihenfolge zu steuern.

Wenn wir die Fußzeile z-index auf 1, den Körper z-index auf 2 und den Header z-index bis 3 einstellen, kann die Standardstapelreihenfolge vollständig umgekehrt werden.

Auf der Oberfläche erscheint es einfach: Je höher der Wert ist, desto höher ist die Elemente Stapel - also wird z-index immer über z-index: 9999 sein. Leider ist die Realität komplizierter als diese. z-index: 9

Z-Index im Stapelkontext

<code class="language-html"><header class="site-header"></header>
<main class="site-content"></main>
<footer class="site-footer"></footer></code>

Wenn Sie eine Schachtel in den

Behälter hinzufügen und außerhalb der unteren rechten Ecke positionieren, sehen wir, dass sie sich über der grünen Box unter der rosa Box befindet. site-content

<code class="language-css">.site-header, .site-content, .site-footer {
  position: absolute;
  width: 400px;
  padding: 20px;
}
.site-header {top: 0; left: 0;}
.site-content {top: 50px; left: 50px;}
.site-footer {top: 100px; left: 100px;}</code>

Basierend auf dem, was wir über

wissen, könnten wir denken, dass wir nur einen höheren Wert für z-index festlegen müssen, um diese gelbe Box auf der Pink -Box zu erscheint. z-index

Wenn wir

auf 4 festlegen (oben z-index), werden wir keine Änderungen sehen. Menschen versuchen normalerweise, das Stapeln mit sehr großen Zahlen zu zwingen (wie 9999), aber dies hat auch keine Wirkung. In der Codebasis ist ein solcher Wert z-index: 3 ein Code -Geruch. Versuchen Sie also, dies nach Möglichkeit zu vermeiden. z-index

Der Grund, warum wir nicht das erwartete Ergebnis der gelben Box über der rosa Box erhalten können, ist die Art und Weise, wie

im Stapelkontext verhält. z-index

Um dies zu demonstrieren, schauen wir uns ein etwas komplexeres Beispiel an, das ich von der MDN -Website geliehen habe.

... (Der HTML- und CSS -Code im MDN -Beispiel wird hier weggelassen, weil der Artikel zu lang ist, aber der wichtige Erläuterungsteil bleibt beibehalten) ....

All dies kann durch die Tatsache erklärt werden, dass alle

-Werte in ihrem übergeordneten Stapelkontext analysiert werden. Da der Wert des übergeordneten Containers z-index höher ist als die Fußzeile, werden alle Positionierungselemente in .site-content in diesem Kontext bewertet. z-index .site-content Verstehe die Stapelreihenfolge von Elementen im Stapelkontext, du kannst sie mit Kindern in verschachtelten geordneten Listen vergleichen.

Dies kann wie folgt geschrieben werden:

Header:

• z-index: 5 Betreff:
• z-index: 4 Feld 1:
  • z-index: 4.6 Feld 2:
  • z-index: 4.1 Feld 3:
  • z-index: 4.3
  Fußzeile:
• z-index: 2
, selbst wenn der Header

5 ist und der

des Kasten 1 ist 6, ist seine Rendering -Reihenfolge 4,6, was immer noch weniger als 5 beträgt. Daher wird Kasten 1 unter dem Header angezeigt. z-index z-index Es war zunächst ein wenig verwirrend, aber mit der Übung begann es wirklich Sinn!

Z-Index ist nur für die Positionierung von Elementen

geeignet

Wenn Sie die Stapelreihenfolge der Elemente steuern möchten, können Sie z-index verwenden. position wirkt sich jedoch nur dann aus, wenn der absolute -Werte des Elements relative, fixed oder z-index beträgt.

Elemente genau mit position genau zum Aufbau komplexer Layouts oder interessanten UI -Muster sind, aber es ist oft wünschenswert, die Stapelreihenfolge zu steuern, ohne die Elemente in der ursprünglichen Position auf der Seite zu bewegen.

Wenn dies der Fall ist, können Sie nur position: relative festlegen, aber keinen Wert für top, right, bottom oder left angeben. Das Element bleibt in seiner ursprünglichen Position auf der Seite, der Dokumentfluss wird nicht unterbrochen und der Wert z-index wird wirksam.

negativer Z-Index-Wert kann verwendet werden

hydratisierte Elemente werden häufig verwendet, um komplexe Formen oder UI -Komponenten zu bauen. Dies bedeutet normalerweise, dass sich die Elemente gegenseitig überlagert werden und der z-index -Werte weiter zunimmt. Um ein Element unter einem anderen Element zu platzieren, muss es nur einen niedrigeren z-index -Werte haben, der negativ sein kann. Dies ist nützlich, wenn Sie ein Pseudoelement verwenden und es hinter seinem übergeordneten Elementinhalt positionieren möchten.

Aufgrund der Art und Weise, wie das Stapeln des Kontextes funktioniert, muss ein negativer

-Wartwert darauf eingestellt werden, wenn das Element

oder :before nach dem Textinhalt seines übergeordneten Elements positioniert werden soll. :after z-index Z-Index Strategie

Fassen wir eine einfache Strategie zusammen, die ich bei der Anwendung

in meinem Projekt verwendet habe.

z-index Wir haben einstellige Inkremente des Wertes

verwendet, aber was ist, wenn wir ein neues Element zwischen den beiden Elementen hinzufügen möchten, die auf

und z-index eingestellt sind? Sie müssen viele Werte ändern- möglicherweise in der gesamten Codebasis, was zu Problemen führen kann und CSS-Bruch in anderen Teilen der Website verursachen kann. z-index: 3 z-index: 4 Z-Index mit 100 Schritten einstellen

Wenn Sie mit

umgehen, sehen Sie oft Code wie folgt:

z-index

Es sieht meiner Meinung nach schlecht aus (und wird erst schlechter, nachdem er

<code class="language-html"><header class="site-header"></header>
<main class="site-content"></main>
<footer class="site-footer"></footer></code>

angeschlossen hat). Ein solcher Wert anzeigt normalerweise, dass der Entwickler den Stapelkontext nicht versteht und versucht, eine Schicht auf dem anderen zu zwingen.

!important Anstatt eine Zahl wie 9999, 53 oder 12 zu verwenden, können wir unser

-Verhältnis systematisieren und mehr Ordnung in den Prozess bringen. Es ist nicht nur, weil ich Entwickler Zwangsstörung habe. Ernsthaft.

z-index Ich habe keine einstelligen Inkremente von

, sondern 100 Schritten verwendet.

z-index

Ich habe dies getan, um die Dinge organisiert zu halten, und habe auch viele verschiedene Schichten im Projekt festgestellt. Ein weiterer Vorteil ist, dass Sie, wenn Sie eine neue Ebene zwischen zwei anderen Ebenen hinzufügen müssen, zwischen 99 potenziellen Werten wählen können.

<code class="language-css">.site-header, .site-content, .site-footer {
  position: absolute;
  width: 400px;
  padding: 20px;
}
.site-header {top: 0; left: 0;}
.site-content {top: 50px; left: 50px;}
.site-footer {top: 100px; left: 100px;}</code>

Dieser manuelle Ansatz ist bei der Erstellung eines Systems sehr zuverlässig, aber in Verbindung mit einem Präprozessor wie Sass kann er flexibler gemacht werden.

... (Der FAQs -Teil wird hier weggelassen, weil es sich mit der vorherigen Ausgabe mehr wiederholt) ... z-index

Das obige ist der detaillierte Inhalt vonMastering Z-Index in CSS. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!