Lassen Sie uns über einige interessante CSS-Themen sprechen (3) – Wie viel wissen Sie über Stapelreihenfolge und Stapelkontext?

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.

3. Wie viel wissen Sie über Stapelebene und Stapelkontext?

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 层为：

1. the background and borders of the element forming the stacking context.

2. the child stacking contexts with negative stack levels (most negative first).

3. the in-flow, non-inline-level, non-positioned descendants.

4. the non-positioned floats.

5. the in-flow, inline-level, non-positioned descendants, including inline tables and inline blocks.

6. the child stacking contexts with stack level 0 and the positioned descendants with stack level 0.

7. the child stacking contexts with positive stack levels (least positive first).

稍微翻译一下：

1. 形成堆叠上下文环境的元素的背景与边框

2. 拥有负 z-index 的子堆叠上下文元素 （负的越高越堆叠层级越低）

3. 正常流式布局，非 inline-block，无 position 定位（static除外）的子元素

4. 无 position 定位（static除外）的 float 浮动元素

5. 正常流式布局， inline-block元素，无 position 定位（static除外）的子元素（包括 display:table 和 display:inline ）

6. 拥有 z-index:0 的子堆叠上下文元素

7. 拥有正 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:

• Wurzelelement (HTML),
• Absolute/relative Positionierung mit Z-Index-Wert nicht „automatisch“,
• Ein Flex-Element mit einem anderen Z-Index-Wert als „auto“, d. h.: Anzeige des übergeordneten Elements: flex|inline-flex,
• Elemente mit einem Deckkraftattributwert von weniger als 1 (siehe Spezifikation zur Deckkraft),
• Elemente, deren Transformationsattributwert nicht „none“ ist,
• Elemente, deren Mix-Blend-Mode-Attributwert nicht „normal“ ist,
• Elemente, deren Filterwert nicht „none“ ist,
• Elemente, deren Perspektivwert nicht „none“ ist,
• Elemente, deren Isolationsattribut auf „isolieren“ gesetzt ist,
• Position: fest
• Geben Sie alle CSS-Eigenschaften in will-change an, auch wenn Sie den Wert dieser Eigenschaften nicht direkt angeben
• -Element
mit dem Attribut webkit-overflow-scrolling auf „touch“ gesetzt

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.