Share
Das z-index Die Eigenschaft von CSS scheint einfach zu sein, aber es gibt viel zu entdecken, wenn Sie wirklich wissen wollen, wie es funktioniert. In diesem Tutorial werden wir die inneren Abläufe von z-index durch einen Blick auf erklären Stapelkontexte und einige praktische Beispiele.
CSS bietet drei verschiedene Positionierungsschemata für das Layout von Boxen:
Das letzte Element entfernt ein Element vollständig aus dem normalen Fluss und verlässt sich darauf, dass der Entwickler dem Element sagt, wo es angezeigt werden soll.
Sie geben die Werte oben, links, unten und rechts an, um das Element im zweidimensionalen Raum zu positionieren. Mit CSS können Sie es jedoch auch mithilfe der z-index-Eigenschaft in der dritten Dimension platzieren.
Auf den ersten Blick scheint Z-Index eine einfache Eigenschaft zu sein. Sie legen Werte fest, um zu bestimmen, wo sich das Element auf dieser dritten Achse befindet, und Sie sind fertig. Unter der Oberfläche gibt es noch viel mehr zu entdecken, einschließlich einiger Regeln, welche Arten von Elementen über anderen Elementen liegen.
Beginnen wir mit den Grundlagen, um sicherzustellen, dass wir uns alle auf derselben Seite befinden. Dann werden wir über das Stapeln sprechen, um mehr über das, was z-index im Hintergrund passiert, zu verstehen.
Ich bin sicher, dass Sie mit dem dreidimensionalen Koordinatenraum vertraut sind. Wir haben eine X-Achse, die normalerweise zur Darstellung der Horizontalen verwendet wird, eine Y-Achse, um die Vertikale darzustellen, und eine Z-Achse, die darstellt, was in die Seite hinein und aus dieser heraus oder in unserem Fall den Bildschirm passiert.
Wir haben nicht wörtlich sehen die z-Achse, da der Bildschirm eine zweidimensionale Ebene ist. Wir sehen es in Form von Perspektive und von einigen Elementen, die vor oder hinter anderen Elementen erscheinen, wenn sie denselben zweidimensionalen Raum teilen.
Um festzustellen, wo sich ein Element entlang dieser dritten Achse befindet, können Sie mit CSS drei Werte für die z-index-Eigenschaft festlegen.
Im Moment konzentrieren wir uns auf den ganzzahligen Wert. Dies kann positiv, negativ oder 0 sein. Je höher der Wert, desto näher am Element erscheint das Element. Je niedriger der Wert, desto weiter entfernt erscheint er.
Wenn zwei Elemente so positioniert sind, dass sie einen gemeinsamen Bereich eines zweidimensionalen Raums einnehmen, wird das Element mit dem größeren Z-Index das Element mit dem niedrigeren Z-Index in den Bereichen verdecken oder verdecken, in denen sie den Raum gemeinsam nutzen.
Ich gehe davon aus, dass das oben Genannte leicht verständlich ist und sich höchstwahrscheinlich genau so verhält, wie Sie es erwarten. Es gibt jedoch einige unbeantwortete Fragen.
Um diese Fragen zu beantworten, müssen wir mehr über die Funktionsweise von z-index erfahren, insbesondere über die Idee, Kontexte, Stapelebenen und Stapelreihenfolgen zu stapeln.
Stapeln von Kontexten und Stapeln von Ebenen kann ein wenig schwierig sein, um einen Begriff zu entwerfen. Stellen Sie sich für einen Moment einen Tisch mit mehreren darauf befindlichen Gegenständen vor. Die Tabelle steht für einen Stapelkontext. Wenn sich neben der ersten eine zweite Tabelle befindet, steht dies für einen anderen Stapelungskontext.
Stellen Sie sich nun auf dem ersten Tisch vor, dass es vier kleine Blöcke gibt, die alle direkt auf dem Tisch sitzen. Auf diesen vier Blöcken befindet sich eine Glasplatte und auf der Glasplatte befindet sich eine Obstschale. Die Blöcke, die Glasplatte und die Obstschale repräsentieren jeweils eine andere Stapelebene innerhalb des Stapelkontexts, der die Tabelle ist.
Für jede Webseite wird ein einzelner Standardstapelkontext erstellt. Die Wurzel dieses Kontextes (der Tabelle) ist das html Element. Alles innerhalb des HTML-Tags befindet sich auf einer Stapelebene innerhalb dieses Standardstapelkontexts (auf dem Tisch befindliche Objekte)..
Wenn Sie einem Element einen anderen Z-Index-Wert als "auto" zuweisen, erstellen Sie einen neuen Stapelkontext mit neuen Stapelebenen, die unabhängig von anderen Stapelkontexten und Stapelebenen auf der Seite sind. Sie bringen einen anderen Tisch in den Raum, auf dem Gegenstände sitzen können.
Die einfachste Möglichkeit, die Stapelreihenfolge zu verstehen, ist ein einfaches Beispiel. So einfach werden wir nicht einmal positionierte Elemente in Betracht ziehen.
Denken Sie an eine sehr einfache Webseite. Anders als die Standardeinstellung Was erwarten Sie beim Laden der Seite?? Ich hoffe, es hat nicht lange gedauert, bis Sie einen meist blauen Bildschirm sehen konnten, mit Ausnahme eines roten Blocks, der die von Ihnen für die Breite und Höhe des div festgelegten Abmessungen hat. Der rote Block befindet sich wahrscheinlich oben links auf der Seite, es sei denn, Sie lassen Ihrer Fantasie etwas freien Lauf und geben ihm mehr CSS, um ihn woanders anzuzeigen. Sie denken vielleicht "so was, das war ziemlich offensichtlich", aber was nicht so offensichtlich ist, ist, warum Sie einen roten Block auf einem blauen Hintergrund sehen. Warum sehen Sie das div auf dem HTML-Element? Der Grund ist, dass beide Regeln für die Stapelreihenfolge befolgen. In diesem einfachen Beispiel sagen die Regeln, dass untergeordnete Blöcke im normalen Fluss (div) auf einer höheren Ebene als Hintergründe und Ränder des Wurzelelements (html-Element) liegen. Sie sehen das div oben, weil es auf einer höheren Stapelebene liegt. Während das obige Beispiel nur einen Stack mit zwei Ebenen enthält, gibt es einen sieben mögliche Ebenen in jedem Stapelkontext, der unten aufgeführt ist. Diese sieben Ebenen bilden die Regeln für die Stapelreihenfolge. Ein Element auf Ebene 7 wird oberhalb (näher beim Betrachter) als Elemente auf Ebene 1 bis 6 angezeigt. Ein Element auf Ebene fünf wird über einem Element in Ebene zwei angezeigt. Ein Element bei… gut, Sie bekommen die Idee. Als ich zum ersten Mal die oben genannten Regeln für die Stapelreihenfolge traf, fielen mir ein paar Dinge auf. Wenn Sie nur die Stufen zwei, sechs und sieben betrachten (diejenigen, in denen der Z-Index erwähnt wird), passt dies zu dem, was Sie wahrscheinlich zu Z-Index annehmen. Der positive z-Index liegt auf einem höheren Niveau als der 0-z-Index, der sich auf einem höheren Niveau befindet als der negative z-Index. Das ist wahrscheinlich der Ort, an dem die meisten von uns aufhören, über all diese Stapelschichten nachzudenken. Vor diesen Regeln hätte ich angenommen, dass alles andere einem Z-Index von 0 entspricht. Das stimmt natürlich nicht. Tatsächlich liegt das meiste alles auf einem Niveau unterhalb des Z-Index = 0-Niveaus. Interessant ist auch, dass sich nicht positionierte Elemente auf vier verschiedenen Stapelebenen befinden. Es macht Sinn, wenn Sie darüber nachdenken. Wenn sich alle nicht positionierten Elemente auf derselben Stapelebene befinden, wird der Text (Inline-Feld) nicht über einem div (Block-Level-Feld) angezeigt.. Ich habe schon einige Male erwähnt, wie man neue Stapelkontexte erstellt. Wenn Sie einen anderen Z-Index-Wert als zuweisen Lassen Sie uns noch einmal Tabellen als Stapelkontexte betrachten. Vorher hatten wir einen Tisch und auf dem Tisch befanden sich vier Blöcke, ein Teller mit Glas und eine Obstschale. Stellen Sie sich vor, der zweite Tisch, den wir vorstellten, hat auch vier Blöcke gleicher Größe und eine Glasplatte darauf, aber keine Obstschale. Sie würden erwarten, dass die Obstschale vom ersten Tisch der höchste Punkt im Raum ist. Es befindet sich auf der höchsten Ebene (es hat den größten Z-Index). Was würde aber passieren, wenn wir den ersten Tisch und alles darüber in den Keller verlegen? Diese Obstschale wäre jetzt niedriger als alles auf Tisch zwei, weil Tisch eins selbst auf ein Niveau unter Tisch zwei verschoben wurde. Dasselbe gilt für positionierte Elemente auf einer Webseite. Beachten Sie das Markup und das Styling unten. Wille HTML: CSS: Obwohl div.two den größeren z-Index (100) hat, befindet es sich tatsächlich unterhalb von div.four (z-index = 50) auf der Seite. Sie können das Ergebnis des Codes oben in der Abbildung unten sehen. Die schwarzen und gelben Ränder zeigen die unterschiedlichen Stapelkontexte an, in denen sich jedes Element befindet. Da div.two in div.one enthalten ist, ist sein Z-Index relativ zu Was wir gemacht haben, ist umgezogen Wenn Sie wie ich sind, hat Sie dies wahrscheinlich ein oder zwei Mal ausgelöst, wenn Sie mit z-index arbeiten. Hoffentlich helfen diese Beispiele, zu klären, warum ein Element mit einem größeren Z-Index manchmal hinter einem anderen Element mit einem niedrigeren Z-Index angezeigt wird. Wenn Sie das erste Mal darauf stoßen, scheint die Z-Index-Eigenschaft sehr einfach zu verstehen. Werte repräsentieren eine Position auf einer Achse innerhalb und außerhalb des Bildschirms, und das ist alles. Ein tieferer Blick auf z-index zeigt, dass hinter den Kulissen etwas mehr los ist. Es gibt Stapelkontexte, Stapelebenen und Regeln, um zu bestimmen, welches Element in der Stapelreihenfolge höher oder niedriger angezeigt wird. Mit positionierten Elementen können neue Stapelkontexte erstellt werden. Gesamte Stapelebenen werden über oder unter allen Ebenen in einem anderen Stapelkontext angezeigt., , , usw. Sie finden auf jeder Webseite eine einzige
Die sieben Ebenen in einem Stapelkontext
Alles zusammenfügen
Auto Für ein Element erstellen Sie einen neuen Stapelkontext, unabhängig von anderen Stapelkontexten.div.two Anzeige über oder unter div.four?div Breite: 200px; Höhe: 200px; Polsterung: 20px; Eins, zwei, drei, vier Position: absolut; .one background: # f00; Umriss: 5px fest # 000; oben: 100px; links: 200px; z-Index: 10; .zwei Hintergrund: # 0f0; Umriss: 5px fest # 000; oben: 50px; links: 75px; z-Index: 100; .dree background: # 0ff; Umriss: 5px fest # 000; oben: 125px; links: 25px; z-Index: 150; .four background: # 00f; Umriss: 5px fest # ff0; oben: 200px; links: 350px; z-Index: 50;
div.oneStapel. In der Tat haben wir wirklich Folgendes:
div.one und alles, was darin enthalten ist div.four. Unabhängig von den Werten, die wir für die z-index-Eigenschaft von Elementen festlegen div.one Sie werden immer unten angezeigt div.four.
Fazit
Lesen Sie weiter
Accentsconagua