Nachgedruckt von Zhihu, habe ich nach dem Lesen viel gewonnen
In der Vergangenheit wusste ich nicht, warum ich versucht habe, den Z-Index-Wert zu verwenden, um diese Art von Problem zu lösen. Die Leute haben auch 999.9999 eingestellt, was ziemlich sprachlos ist, haha.
Der kopierte Inhalt enthält einige Animationen und Links. Sie können zum Originaltext wechseln, wenn Sie ihn nicht anzeigen können. . . .
Vorwort
Vor kurzem bin ich bei der Verwendung von CSS3-Animationen auf ein DOM-Stapelproblem gestoßen, daher habe ich den Z-Index neu gelernt. Ich bin der Meinung, dass diese CSS-Eigenschaft ziemlich kompliziert ist. Ich hoffe, dieser Artikel kann Ihnen helfen, den Reiz des Z-Index wieder zu verstehen.
Dies ist passiert (der Hintergrund ist etwas lang), und ich habe kürzlich die folgende Listenseite geschrieben:
Fügen Sie dann jedem Produktelement eine CSS3-Animation hinzu. Der Animationseffekt sieht wahrscheinlich folgendermaßen aus: Demo-Adresse
Der Effekt nach der Implementierung ist wahrscheinlich folgendermaßen (der Screenshot ist etwas vage, es wird empfohlen, auf die Demo-Adresse zu klicken, um sie anzuzeigen):
Das Display ist in Chrome normal, aber wenn ich es über Safari öffne, finde ich es schrecklich. Die Animation steckt sehr fest:
Wenn Sie zwischen verschiedenen Produktelementen wechseln, werden Sie feststellen, dass die Seitenanimation offensichtlich hängen bleibt. Wenn ich daran denke, stört mich das nicht. Deshalb habe ich jedem Produktelement eine Beschleunigung der 3D-Animationshardware hinzugefügt. Die Methode ist auch sehr einfach, wie die folgende:
.item {
transform: translateZ(0); /* 或者 will-change: transform; */
}Dies ist eine gängige Optimierungsmethode für die Hardwarebeschleunigung. Wenn Sie dies nicht verstehen, können Sie Folgendes lesen: Verwenden Sie CSS, um die Hardwarebeschleunigung zu aktivieren und die Leistung der Website zu verbessern
Nach dem Öffnen von Safari stellte ich fest, dass die Seitenanimation sehr flüssig war und die Optimierung der Hardwarebeschleunigung erfolgreich war. Damit trat jedoch ein neues Problem auf, nämlich das in diesem Artikel erwähnte Problem beim Stapeln von DOM-Elementen.
Obwohl der Animationseffekt behoben wurde, tritt beim Stapeln der DOM-Elemente auf der Seite ein Problem auf: Das heißt, die folgenden Produktelemente decken das Eingangs-Popup in der unteren rechten Ecke der oben genannten Produktelemente ab, und der normale Effekt sollte hoffentlich so sein:
Auf ein solches Problem gestoßen, die erste Reaktion: Dann werde ich den Z-Index der Popup-Box erhöhen, es ist ein Kinderspiel, aber egal wie ich den Z-Index-Wert anpasse, die Popup-Box wird immer von dem unten stehenden Produktelement beeinflusst. Als ich das verdeckte, war ich zuerst verwirrt.
Schließlich las ich einige Materialien zum Studieren und Kämmen und fand schließlich eine Lösung. Nicht viel Unsinn, ich werde anfangen, das gesamte Z-Index-bezogene Wissen zu kämmen und am Ende eine Lösung für das obige Problem einzureichen. (Die folgende Erklärung enthält viele Anwendungsfälle. Ich werde den gesamten Code zum einfachen Nachschlagen auf jsfiddle veröffentlichen. Leser können auf die Demo-Adresse klicken, um das Beispiel anzuzeigen.)
Grundlagen des Z-Index
Führen Sie zuerst den Z-Index ein. Mit dem Z-Index-Attribut wird die Reihenfolge der Elemente und Unterelemente auf der Z-Achse angepasst. Wenn ein Element überschrieben wird, befindet sich welches Element oben und welches Element unten. Im Allgemeinen decken Elemente mit größeren Z-Index-Werten niedrigere Elemente ab.
Der Standardwert für den Z-Index ist auto. Sie können eine positive oder eine negative Ganzzahl festlegen. Wenn Sie CSS3 nicht berücksichtigen, funktioniert nur der Z-Index des Positionierungselements (Position: relativ / absolut / fest). Wenn Ihr z -index wirkt auf ein nicht positioniertes Element (einige CSS3 werden ebenfalls wirksam) und hat keine Auswirkung. Zum Beispiel: Demo-Adresse
Wenn Sie die Position für das DOM-Element festlegen, wird der Z-Index des Elements wirksam. Die Standardeinstellung ist Auto. Sie können ihn einfach dem Z-Index gleichsetzen: 0, z. B. die Demo-Adresse , dh der Z-Index wird wirksam Voraussetzung ist, dass die Positionierungseigenschaften (oder einige CSS3-Eigenschaften) festgelegt werden, damit sie wirksam werden.
Nachdem Sie die Demo gelesen haben, werden Sie vielleicht verwirrt sein, warum ich nur eine Positionseigenschaft festgelegt habe, ohne den Z-Index-Wert festzulegen, und warum die roten Quadrate die blauen Quadrate abdecken. Hier ist die Kenntnis der Stapelstufe des Z-Index .
Stapelebene
Ein DOM-Element bestimmt unabhängig vom Stapelkontext die Anzeigereihenfolge der Elemente auf der z-Achse gemäß der Stapelebene. Wenn verschiedene DOM-Elemente im Klartext kombiniert und überlappt werden, ihre Anzeigereihenfolge Befolgen Sie die Regeln der Kaskadenebene, und der Z-Index wird verwendet, um die Anzeigereihenfolge eines Elements so anzupassen, dass das Element auf und ab schweben kann.
Wie hoch ist die Kaskadenebene? Das Folgende ist das berühmte 7-Level-Stacking-Level (Stacking-Level)
Es ist ersichtlich, dass die Kaskadenebene die Darstellungsregeln reguliert, wenn sich Elemente überlappen. Mit dieser Regel ist es nicht schwer zu erklären, warum die roten Quadrate im vorherigen Beispiel die blauen Quadrate abdecken. Denn wenn Sie die Eigenschaft position: relative festlegen, wird das Element z-index: auto wirksam und bewirkt, dass sich die Stapelebene erhöht, die höher als die des normalen Inline-Elements ist, sodass das rote Quadrat oben angezeigt wird.
Nachdem ich die Regeln für kaskadierende Ebenen gekannt habe, möchte ich einige Beispiele zur Veranschaulichung geben:
Inline- / Inline-Block-Elemente sind höher als Floating-Elemente
Das erste ist, dass das Inline / Inline-Block-Element höher ist als das Floating-Element: Demo-Adresse
Es ist deutlich zu erkennen, dass der Text (Inline-Element) das Bild abdeckt (Floating-Element).
Inline- / Inline-Block-Elemente sind höher als Blockelemente
Das rote Quadrat (Inline-Block) deckt das grüne Quadrat (Block) ab. Da der Text (Anzeige: Block) jedoch zur Inline-Ebene gehört, befindet er sich auf derselben Ebene wie das rote Quadrat (Inline-Block) und folgt dem Prinzip, zuerst zu kommen (wird als Nächstes erläutert). Nicht durch Inline-Block-Elemente abgedeckt.
Die Elementstapelebene ist äquivalent
Wenn dann zwei Elemente auf derselben Ebene gestapelt werden, müssen zu diesem Zeitpunkt die folgenden zwei Richtlinien befolgt werden:
- Late-Comer-Prinzip
- Wessen Z-Index ist groß, wer ist in der Regel
Das Prinzip, von hinten aufzuholen:
Die letztere Regel lautet, dass das folgende DOM das vorherige DOM-Element überschreibt, wenn Elemente auf derselben Ebene gestapelt werden. Das ist leicht zu verstehen, aber ich muss es erklären. Aus diesem Grund sehen wir oft, warum das letztere Element das vorherige Element abdeckt.
Wie im vorherigen Beispiel folgt der Text (Anzeige: Block), da er zur Inline-Ebene gehört, die der Ebene des roten Quadrats (Inline-Block) entspricht, dem Prinzip des Zurückkommens (später erläutert) und wird hier nicht von Inline-Block-Elementen abgedeckt Ich werde kein weiteres Beispiel zur Veranschaulichung veröffentlichen.
Wessen Z-Index ist groß, wer ist oben:
Aufgrund des Vorhandenseins eines Z-Index kann die Reihenfolge der Elemente im selben Stapelkontext angepasst werden. Im Bereich der negativen und positiven Z-Index-Werte liegt der Z-Index-Wert der DOM-Elemente innerhalb dieser beiden Bereiche Je größer der Wert ist, desto höher ist die Anzeigereihenfolge.
Wie können sie nach Kenntnis der Stapelebene angezeigt werden, solange sich die Anzeigereihenfolge der Elemente im selben Stapelkontext befindet, wenn sie sich in unterschiedlichen Stapelkontexten befinden? Was bedeutet dieser kaskadierende Kontext? Mach dir keine Sorgen, dann schau nach unten.
Kaskadierender Kontext
Kaskadierender Kontext, Sie können ihn als den Bereich in JS verstehen. Es gibt häufig mehr als einen kaskadierenden Kontext auf einer Seite (da es viele Möglichkeiten gibt, einen kaskadierenden Kontext zu generieren, aber Sie erkennen ihn nicht). In einem kaskadierenden Kontext folgen wir Die Stapelebene regelt das Stapeln von Elementen.
Nachdem wir das Konzept des kaskadierenden Kontexts eingeführt haben, schauen wir uns zunächst an, wie ein kaskadierender Kontext erstellt werden kann.
Unter normalen Umständen gibt es drei Haupttypen für die Erstellung kaskadierender Kontexte:
- Erstellen Sie standardmäßig einen kaskadierenden Kontext
- Sie müssen mit dem Z-Index zusammenarbeiten, um die Erstellung eines kaskadierenden Kontexts auszulösen
- Sie müssen nicht mit dem Z-Index zusammenarbeiten, um die Erstellung eines kaskadierenden Kontexts auszulösen
Erstens: Erstellen Sie standardmäßig einen kaskadierenden Kontext
Der kaskadierende Kontext wird standardmäßig nur mit dem HTML-Stammelement erstellt, das Sie als Body-Tag verstehen können. Es gehört zum Root-Cascading-Kontextelement und benötigt keine CSS-Eigenschaften, um es auszulösen.
Zweitens müssen Sie mit dem Z-Index zusammenarbeiten, um die Erstellung eines kaskadierenden Kontexts auszulösen
Verlassen Sie sich auf den Z-Index-Wert, um einen kaskadierenden Kontext zu erstellen:
- Der Positionswert ist relativ / absolut / fest (einige Browser)
- Flex-Element (übergeordnete Elementanzeige ist flex | inline-flex). Beachten Sie, dass es sich um ein untergeordnetes Element handelt und nicht um ein übergeordnetes Element zum Erstellen eines Stapelkontexts
In diesen beiden Fällen müssen Sie einen bestimmten Z-Index-Wert festlegen, und Sie können den Z-Index nicht auf Auto setzen. Dies ist ein geringfügiger Unterschied zwischen Z-Index: Auto und Z-Index: 0.
Wie bereits erwähnt, wird beim Festlegen von position: relative der Wert von z-index wirksam. Zu diesem Zeitpunkt wird jedoch kein Stapelkontext erstellt. Wenn z-index nicht auf auto gesetzt ist, wird das Element auch durch Festlegen von z-index: 0 ausgelöst Erstellen Sie einen kaskadierenden Kontext.
Drittens müssen Sie nicht mit dem Z-Index zusammenarbeiten, um die Erstellung eines kaskadierenden Kontexts auszulösen
In diesem Fall wird es im Wesentlichen durch die neuen Eigenschaften in CSS3 ausgelöst. Häufige sind:
- Die Deckkraft des Elements beträgt weniger als 1
- Der Mix-Blend-Modus-Wert des Elements ist nicht normal
- Der Wert der folgenden Attribute des Elements ist nicht none:
- verwandeln
- Filter
- Perspektive
- Clip-Pfad
- Maske / Maskenbild / Maskenrand
- Der Wert des isolution-Attributs des Elements ist isolate
- Das Attribut -webkit-overflow-scrolling des Elements ist touch
- Das Willensänderungsattribut des Elements hat einen Wert, der einen kaskadierenden Kontext erstellt
Nach der Einführung des Konzepts, wie ein Kaskadenkontext erstellt und wie er erstellt wird, sollte beachtet werden, dass das Element, das den Kaskadenkontext erstellt hat, den lokalen Kaskadenkontext verstehen kann, nur seine Nachkommen betrifft und seine eigene Kaskadenebene durch den übergeordneten Kaskadenkontext bestimmt wird beschlossen.
Vergleichen Sie die Anzeigereihenfolge zweier DOM-Elemente
Lassen Sie uns als Nächstes zusammenfassen, wie die Anzeigereihenfolge von zwei DOM-Elementen verglichen wird.
- Wenn es sich im selben Stapelkontext befindet, werden die Elemente gemäß den Regeln der Stapelebene angezeigt
- Wenn es sich in unterschiedlichen Stapelkontexten befindet, suchen Sie zuerst den Stapelkontext des gemeinsamen Vorfahren und vergleichen Sie dann die Stapelebene des lokalen Stapelkontexts, in dem sich die beiden Elemente unter dem gemeinsamen Stapelkontext befinden.
In diesen beiden Sätzen sind Tausende von Wörtern zusammengefasst, aber es gibt viele Punkte, auf die Sie achten müssen. Schauen wir uns zunächst den ersten Punkt an:
Kaskadierender Kontext
Wenn es sich im selben Kaskadenkontext befindet, werden die Elemente gemäß den Regeln der Kaskadenebene angezeigt. Dies wurde bereits bei der Einführung der Kaskadenebene eingeführt. Es ist zu beachten, dass sich die Elemente der Eltern-Kind-Beziehung wahrscheinlich im selben Kaskadenkontext befinden. In diesem Fall Der Pegelvergleich der unteren Elemente wird ebenfalls gemäß den Regeln des Kaskadenpegels angezeigt.
Zum Beispiel: Demo-Adresse
Vergleich des .box-Elements und seines untergeordneten Elements img: Da img und .box zum selben Stapelkontext gehören, weil img z-index -1 ist, sinkt es unter das übergeordnete Element. Das übergeordnete Element deckt das Bild ab, das img bleibt jedoch bestehen Oberhalb der Hintergrundfarbe des Körpers muss der Boden oder Rand des Stapelkontexts (Körperelement) sein, da er der Stapelebene mit 7 Ebenen folgt.
Wenn wir jedoch das .box-Element einen lokalen Stapelkontext erstellen lassen, ist dies anders. Das .box-Element und das img-Element befinden sich ebenfalls im selben Stapelkontext, aber der Kontext wird auf den von der .box erstellten lokalen Stapelkontext umgeschaltet.
Sie werden feststellen, dass das img-Element die Hintergrundfarbe von .box abdeckt, da die Hintergrundfarbe des Stapelkontexts immer die niedrigste ist. Der Stapelkontext ändert sich vom body-Element zum .box-Element, wenn es sich jedoch um das span-Element und das img-Element unter .box handelt Im Vergleich dazu ist das Inline-Element höher als das Element mit einem negativen Z-Index, sodass 2222 auf dem Bild angezeigt wird.
Anhand dieses Beispiels möchte ich veranschaulichen, dass das Stapeln von übergeordneten und untergeordneten Elementen eher ein lokaler Stapelkontext oder kein lokaler Stapelkontext ist. Daher müssen Sie einen gemeinsamen Stapelkontext finden.
Verschiedene kaskadierende Kontexte
Dies ist komplizierter und kann in einem Satz zusammengefasst werden: Es hängt vom Besitzer ab, gegen einen Hund zu kämpfen. Lassen Sie mich eine Skizze zeichnen, um Folgendes zu veranschaulichen:
Der allgemeine DOM-Baum auf der Seite sieht folgendermaßen aus : Root, ParentX, ChildX sind alle gestapelte Kontextelemente, nicht unbedingt die übergeordneten Elemente von ABCD
- Ein Element möchte mit dem B- oder ChildB-Element verglichen werden. Ich bin sehr froh, dass sie zum selben Stapelkontext (ChildB) gehören. Beurteilen Sie einfach nach der Stapelebene
- Wenn das A-Element mit C oder ChildA verglichen werden soll, suchen Sie den gemeinsamen Vorfahren-Stapelkontext (ParentB) und vergleichen Sie nach dem Auffinden die Stapelebene gemäß dem lokalen Stapelkontext der beiden Elemente im Vorfahren-Stapelkontext (hier ChildA und ChildB). Vergleichen)
- Wenn A gegen D kämpfen möchte, suchen Sie auf die gleiche Weise den Stapelkontext der Vorfahren (Root) und vergleichen Sie die Stapelebenen von ParentA und ParentB.
Ist es sehr einfach? Hier sind zwei einfache Beispiele zur Veranschaulichung:
Beispiel 1: Demo-Adresse
Obwohl der Z-Index von childA: 9999 im Vergleich zu parentB oder childB sehr groß ist, ist er nicht zum Vergleichen geeignet. Er kann nur mit seinem Chef parentA verglichen werden. Wenn parentA mit parentB verglichen wird, habe ich herausgefunden: Verdammt, es stellt sich heraus Dein Z-Index ist 2, was größer als meiner und respektlos ist, also müssen childA und parentA gehorsam unter parentB bleiben.
Wenn wir das Beispiel geringfügig ändern, lassen Sie parentA keine neuen kaskadierenden Kontextelemente mehr erstellen: Demo-Adresse
Wenn parentA den kaskadierenden Kontext nicht mehr erstellt, möchte childA mit childB vergleichen. Er ist nicht mehr auf parentA beschränkt, sondern wird direkt mit parentB verglichen (da childA und parentB sich im selben kaskadierenden Kontext befinden). Offensichtlich steht childA ganz oben Aus diesem Grund deckt childA parentB ab.
Die Lösung des Problems
Das theoretische Wissen wurde eingeführt. Wenn Sie die obige Theorie verstehen, sollte dieses Problem ein Kinderspiel sein. Hier ist die Lösung für das ursprüngliche Problem:
Da zu jedem Produktelement transform: translateZ (0) hinzugefügt wird, erstellt jedes Produktelement einen Stapelkontext. Gemäß den oben genannten Regeln sind die DOM-Elemente in jedem Produktelement abhängig voneinander Jedes Produktelement (jeder Teilstapelkontext) und da die Stapelebene dieser Produktelemente dieselbe ist (wie z-index: auto), folgen Sie dem Prinzip des vorletzten Elements, wodurch die letzteren Elemente die vorherigen Elemente abdecken. Geben Sie ein einfaches Beispiel: Demo-Adresse
Selbst wenn Sie dem untergeordneten Element ein Z-Index-Attribut hinzufügen, wird die Kaskadierungsstufe nicht geändert. Die einzige Möglichkeit besteht darin, den Z-Index-Wert des Elements zu ändern. Da es sich bei dem von uns behandelten Teil um ein spezielles Teil handelt, handelt es sich nur um das Popup-Teil , Und der Popup-Teil wird standardmäßig nicht angezeigt. Er wird nur angezeigt, wenn sich die Maus über dem Eingang befindet. Am einfachsten ist es, den Z-Index-Wert zu erhöhen, wenn Sie mit der Maus über das Objekt fahren, um es zu zerstören. Features von hinten: Demo-Adresse
Der letzte vereinfachte Effekt:
Empfohlene Vorgehensweise
Apropos, es kann tatsächlich vorbei sein. Während des Lernens habe ich mir das Video angesehen, das Zhang Xinxu zuvor aufgenommen hat. Er hat einige Best Practices vorgeschlagen. Ich denke, es ist ziemlich gut. Hier eine kurze Einführung:
- Keine Verletzung von zwei Regeln: Vermeiden Sie bei nicht schwebenden Ebenenelementen das Festlegen des Z-Index-Werts. Der Z-Index-Wert hat keinen Grund, 2 zu überschreiten
- Bei schwebenden Ebenenelementen können Sie den maximalen Z-Index-Wert des untergeordneten Elements unter dem Body über JS abrufen und dann 1 als Z-Index-Wert des schwebenden Ebenenelements hinzufügen
Verwenden Sie für nicht schwebende Ebenenelemente nicht zu viel Z-Index, um die Anzeigereihenfolge anzupassen, sondern verwenden Sie flexibel die Stapelebene und die Kriterien für das Aufrufen, damit die Elemente die richtige Anzeige erhalten. Wenn Sie den Z-Index so einstellen möchten, dass er angepasst wird, Es wird nicht empfohlen, dass der Z-Index-Wert von nicht schwebenden Ebenenelementen 2 überschreitet. Bei DOM-Elementen reichen -1, 0, 1, 2 aus, damit die Elemente die richtige Anzeigereihenfolge haben.
Bei schwebenden Ebenenelementen wird es häufig von Komponenten von Drittanbietern entwickelt. Wenn Sie nicht bestätigen können, ob Ihre schwebende Ebene zu 100% im DOM-Baum abgedeckt ist, können Sie dynamisch den maximalen Z-Index aller Unterelemente unter dem Seitenkörperelement ermitteln. Wert, fügen Sie dieser Basis einen als Z-Index-Wert des Floating-Layer-Elements hinzu, um sicherzustellen, dass das Floating-Layer-Element oben angezeigt werden kann.
Ende
Schließlich ist dieser Artikel für ausführliche Z-Index-Eigenschaften beendet. Ich habe das Gefühl, dass CSS-Eigenschaften viele Ostereier enthalten. Dann habe ich Zeit, Kontakt aufzunehmen und weitere zusammenzufassen, und ich werde sie weiterhin teilen, wenn ich Zeit habe.