Detaillierte Einführung in die CSS-Stapelreihenfolge und den Stapelkontext

Lösen Sie das Problem, ohne die Kompatibilität zu berücksichtigen. Sagen Sie einfach, was Ihnen bei der Problemlösung in den Sinn kommt , beeilen Sie sich und erfahren Sie mehr darüber.

Aktualisieren Sie weiter, aktualisieren Sie weiter, aktualisieren Sie weiter, sagen Sie wichtige Dinge dreimal.

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

<a href="http://www.php.cn/wiki/903.html" target="_blank">z-index<span style="font-size: 14px; font-family: verdana, geneva;"> Code> sieht eigentlich sehr einfach aus. Die kaskadierende <code><a href="http://www.php.cn/wiki/903.html" target="_blank">z-index</a>-Priorität z-index wird anhand der Ebene von 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 A und B, die unter demselben übergeordneten p-Tag enthalten sind. Die HTML-Struktur ist wie folgt: p

<p>
    </p><p>#pA display:inline-block</p>
    <p> #pB float:left</p>

Ihre Definitionen lauten wie folgt: CSS

.container{
    position:relative;
    background:#ddd;
}
.container > p{
    width:200px;
    height:200px;
}
.float{
    float:left;
    background-color:deeppink;
}
.inline-block{
    display:inline-block;
    background-color:yellowgreen;
    margin-left:-100px;
}

Grob beschrieben, es bedeutet, etwas gemeinsam zu haben. Die beiden ps des übergeordneten Containers überlappen sich. Ist oben gestapelt, oder ist display:inline-block oben gestapelt? float:left

Beachten Sie, dass die Reihenfolge des DOM hier darin besteht, zuerst und dann display:inline-block zu generieren. Natürlich können Sie die Reihenfolge der beiden DOMs auch wie folgt umkehren: float:left

<p>
    </p><p> #pB float:left</p>
    <p>#pA display:inline-block</p>

Sie werden feststellen, dass und display:inline-block unabhängig von der Reihenfolge immer sind oben gestapelt. p

Dabei handelt es sich tatsächlich um die sogenannte Stapelebene. Es gibt ein Bild, das das gut erklären kann:

Mit der Logik im obigen Bild kann das obige Problem leicht gelöst werden. s inline-blcok ist höher als stacking level, also unabhängig von der Reihenfolge des DOM werden oben gestapelt. float

Die obige Abbildung ist jedoch etwas ungenau. Laut W3-Beamten lauten die genauen 7 Schichten:

1. der Hintergrund und die Ränder des Elements, die den Stapelkontext bilden.

2. die untergeordneten Stapelkontexte mit negativen Stapelebenen (die negativsten zuerst).

3. die einfließenden, nicht auf Inline-Ebene liegenden, nicht positionierten Nachkommen.

4. die nicht positionierten floats.

5. die einfließenden, nicht positionierten Nachkommen auf Inline-Ebene, einschließlich Inline-Tabellen und Inline-Blöcken.

6. das Kind stapelt Kontexte mit Stapelebene 0 und die positionierten Nachkommen mit Stapelebene 0.

7. das Kind stapelt Kontexte mit Positiv Stapelebenen (am wenigsten positiv zuerst).

Eine kleine Übersetzung:

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: 的子堆叠上下文元素（正的越低越堆叠层级越低）

所以我们的两个 p 的比较是基于上面所列出来的 4 和 5 。5 的 stacking level 更高，所以叠得更高。

不过！不过！不过！重点来了，请注意，上面的比较是基于两个 p 都没有形成 堆叠上下文 这个为基础的。下面我们修改一下题目，给两个 p ，增加一个 opacity:

.container{
    position:relative;
    background:#ddd;
}
.container > p{
    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戳我。

会看到，inline-block 的 p 不再一定叠在 float 的 p 之上，而是和 HTML 代码中 DOM 的堆放顺序有关，后添加的 p 会 叠在先添加的 p 之上。

这里的关键点在于，添加的 opacity:0.9 这个让两个 p 都生成了 stacking context（堆叠上下文） 的概念。此时，要对两者进行层叠排列，就需要 z-index ，z-index 越高的层叠层级越高。

堆叠上下文是HTML元素的三维概念，这些HTML元素在一条假想的相对于面向（电脑屏幕的）视窗或者网页的用户的 z 轴上延伸，HTML 元素依据其自身属性按照优先级顺序占用层叠上下文的空间。

那么，如何触发一个元素形成 堆叠上下文 ？方法如下，摘自 MDN：

• 根元素 (HTML),

• z-index 值不为 "auto"的 绝对/相对定位，

• 一个 z-index 值不为 "auto"的 flex 项目 (flex item)，即：父元素 display: flex|inline-flex，

• opacity 属性值小于 1 的元素（参考 the specification for opacity），

• transform 属性值不为 "none"的元素，

• mix-blend-mode 属性值不为 "normal"的元素，

• Elemente, deren Filterwert nicht „none“ ist,

• Elemente, deren Perspektivwert nicht „none“ ist,

• Das Element, dessen Isolationsattribut auf „isolieren“ gesetzt ist,

• Position: behoben

• Geben Sie alle CSS-Eigenschaften in will-change an, auch wenn Sie den Wert dieser Eigenschaften nicht direkt angeben

• -webkit-overflow-scrolling element with „touch“ attribute set

Also, oben geben wir 2. Der Zweck des Hinzufügens des Opazitätsattributs besteht 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 Verstehen der oben genannten stacking-level und stacking-context ist der Schlüssel zum Verständnis der Kaskadenreihenfolge von CSS.

Das obige ist der detaillierte Inhalt vonDetaillierte Einführung in die CSS-Stapelreihenfolge und den Stapelkontext. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!