Dies ist die erste Reihe, in der einige interessante CSS-Themen besprochen werden. Abgesehen von der praktischen Anwendbarkeit sollen einige Themen die Ideen zur Lösung von Problemen erweitern. Darüber hinaus beinhalten sie einige CSS-Details, die leicht übersehen werden.
Kompatibilität wird bei der Lösung von Problemen nicht berücksichtigt. Sagen Sie einfach, was Ihnen bei der Problemlösung nicht vertraut ist schnell.
Aktualisieren Sie weiter, aktualisieren Sie weiter, aktualisieren Sie weiter, sagen Sie wichtige Dinge dreimal.
Alle Themen sind in meinem Github zusammengefasst.
z-index
scheint sehr einfach zu sein. Die Priorität der Kaskadierung wird anhand der Ebene von z-index
bestimmt. Wenn Sie tiefer gehen, werden Sie tatsächlich feststellen, dass sich darin etwas verbirgt.
Sehen Sie sich die folgende Frage an und definieren Sie zwei div
A und B, die unter demselben übergeordneten div
-Tag enthalten sind. Die HTML-Struktur ist wie folgt:
<div class="container"> <div class="inline-block">#divA display:inline-block</div> <div class="float"> #divB float:left</div> </div>
Ihre CSS
Definitionen lauten wie folgt:
.container{ position:relative; background:#ddd; } .container > div{ width:200px; height:200px; } .float{ float:left; background-color:deeppink; } .inline-block{ display:inline-block; background-color:yellowgreen; margin-left:-100px; }
Um es grob zu beschreiben bedeutet es, dass sich zwei DIVs mit einem gemeinsamen übergeordneten Container überlappen. Ist display:inline-block
oben gestapelt, oder float:left
oben gestapelt?
Beachten Sie, dass die Reihenfolge des DOM hier darin besteht, zuerst display:inline-block
und dann float:left
zu generieren. Natürlich können Sie die Reihenfolge der beiden DOMs auch wie folgt umkehren:
<div class="container"> <div class="float"> #divB float:left</div> <div class="inline-block">#divA display:inline-block</div> </div>
会发现,无论顺序如何,始终是 display:inline-block
的 div
叠在上方。
Demo戳我。
这里其实是涉及了所谓的层叠水平(stacking level),有一张图可以很好的诠释:
运用上图的逻辑,上面的题目就迎刃而解,inline-blcok
的 stacking level
比之 float
要高,所以无论 DOM 的先后顺序都堆叠在上面。
不过上面图示的说法有一些不准确,按照 W3官方 的说法,准确的 7 层为:
稍微翻译一下:
z-index
的子堆叠上下文元素 (负的越高越堆叠层级越低)inline-block
,无 position
定位(static除外)的子元素position
定位(static除外)的 float 浮动元素inline-block
元素,无 position
定位(static除外)的子元素(包括 display:table 和 display:inline )z-index:0
的子堆叠上下文元素z-index:
的子堆叠上下文元素(正的越低越堆叠层级越低)所以我们的两个 div
的比较是基于上面所列出来的 4 和 5 。5 的 stacking level
更高,所以叠得更高。
不过!不过!不过!重点来了,请注意,上面的比较是基于两个 div
都没有形成 堆叠上下文
这个为基础的。下面我们修改一下题目,给两个 div
,增加一个 opacity
:
.container{ position:relative; background:#ddd; } .container > div{ width:200px; height:200px; opacity:0.9; // 注意这里,增加一个 opacity } .float{ float:left; background-color:deeppink; } .inline-block{ display:inline-block; background-color:yellowgreen; margin-left:-100px; }
Demo hat mich gestochen.
wird sehen, dass das inline-block
von div
nicht mehr unbedingt über dem float
von div
gestapelt ist, sondern mit der Stapelreihenfolge des DOM im HTML-Code zusammenhängt Später hinzugefügte Divs überlappen sich über dem zuerst hinzugefügten Div.
Der entscheidende Punkt hierbei ist, dass das hinzugefügte opacity:0.9
das Konzept von stacking context(堆叠上下文)
für beide Divs generiert. Zu diesem Zeitpunkt benötigen Sie zum Stapeln der beiden einen Z-Index. Je höher der Z-Index, desto höher die Stapelebene.
Stacking-Kontext ist ein dreidimensionales Konzept von HTML-Elementen, die sich entlang einer imaginären Z-Achse relativ zum Benutzer, der auf das Fenster (Computerbildschirm) oder die Webseite blickt, erstrecken und entsprechend ihren eigenen Attributen priorisiert werden. Die Reihenfolge nimmt im gestapelten Kontext Platz ein.
Wie kann man also die Bildung eines Elements auslösen 堆叠上下文
? Die Methode ist wie folgt, Auszug aus MDN:
Der Zweck des Hinzufügens des Opazitätsattributs zu den beiden oben genannten Divs besteht also darin, einen Stapelkontext zu bilden. Mit anderen Worten: Durch das Hinzufügen von Deckkraft und das Ersetzen der oben aufgeführten Attribute kann der gleiche Effekt erzielt werden.
In einem Stapelkontext werden auch die untergeordneten Elemente gemäß den oben erläuterten Regeln gestapelt. Besonders erwähnenswert ist, dass der Z-Index-Wert seiner untergeordneten Elemente nur im Kontext der übergeordneten Kaskadierung von Bedeutung ist. Dies bedeutet, dass das z-index
des übergeordneten Elements niedriger ist als das eines anderen Geschwisterelements des übergeordneten Elements und nutzlos ist, egal wie hoch das untergeordnete Element z-index
ist.
Das Verständnis der oben genannten stacking-level
und stacking-context
ist der Schlüssel zum Verständnis der Kaskadenreihenfolge von CSS.
Alle Themen sind in meinem Github zusammengefasst und im Blog gepostet in der Hoffnung auf mehr Austausch.
Dies ist das Ende dieses Artikels, wenn Sie noch Fragen oder Anregungen haben. Es handelt sich um einen originellen Artikel und das Wissen ist oberflächlich im Artikel, lassen Sie es mich bitte wissen.