CSS のスタック順序とスタック コンテキストの詳細な紹介

問題を解く際に互換性は考慮されません。問題を解く際に馴染みのない CSS プロパティがあれば、思いついたことを何でも言ってください。

更新し続けて、更新し続けて、更新し続けて、重要なことは3回言います。

3. スタッキング レベルとスタッキング コンテキストについてどの程度知っていますか?

<a href="http://www.php.cn/wiki/903.html" target="_blank">z-index<code><a href="http://www.php.cn/wiki/903.html" target="_blank">z-index</a> 看上去其实很简单，根据 z-index 的高低决定层叠的优先级，实则深入进去，会发现内有乾坤。

看看下面这题，定义两个 p A 和 B，被包括在同一个父 p 标签下。HTML结构如下：

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

它们的 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;
}

大概描述起来，意思就是拥有共同父容器的两个 p 重叠在一起，是 display:inline-block 叠在上面，还是float:left 叠在上面？

注意这里 DOM 的顺序，是先生成 display:inline-block ，再生成 float:left 。当然也可以把两个的 DOM 顺序调转如下:

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

会发现，无论顺序如何，始终是 display:inline-block 的 p 叠在上方。

这里其实是涉及了所谓的层叠水平（stacking level)，有一张图可以很好的诠释：

运用上图的逻辑，上面的题目就迎刃而解，inline-blcok 的 stacking level 比之 float z-index によってカスケード優先度が決まります。より深く行けば、あなたは内なる宇宙を発見するでしょう。

次の質問を見て、同じ親 p タグの下に含まれる 2 つの p A と B を定義します。 HTML の構造は次のとおりです:

.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;
}

1. CSS は次のように定義されています: rrreee

簡単に説明すると、共通の親コンテナを持つ 2 つの ps が重なっていることを意味します。これは、 です。 >display :inline-block を一番上にスタックするか、float:left を一番上にスタックするか?

2. ここでの DOM の順序に注意してください。display:inline-block が最初に生成され、次に float:left が生成されます。もちろん、次のように 2 つの DOM の順序を逆にすることもできます:

rrreee

3. 順序に関係なく、display:inline-block の <code>p が は常に上に積み重ねられます。

これには、いわゆるスタッキング レベルが含まれます。これをよく説明する画像があります:

4. 

5. 上の図のロジックを使用すると、上記の問題は簡単に解決できます。inline-blcok の stacking level は float よりも高くなります。したがって、DOM の順序に関係なく、それらは一番上に積み重ねられます。

ただし、上の図にはいくつかの不正確さがあり、W3 公式声明によると、正確な 7 つのレイヤーは次のとおりです:
スタッキング コンテキストを形成する要素の背景と境界線。
7. 負のスタック レベルを持つ子スタッキング コンテキスト (最も負のものが最初)。

インフロー、非インライン レベル、非配置の子孫

🎜インフロー、インライン レベル。 、インライン テーブルとインライン ブロックを含む、位置決めされていない子孫。🎜🎜🎜🎜🎜🎜スタック レベル 0 の子スタッキング コンテキストとスタック レベル 0 の位置決めされた子孫。🎜 🎜🎜🎜🎜🎜正のスタック レベルの子スタッキング コンテキスト(肯定的でない順)。🎜🎜🎜🎜🎜🎜少し翻訳:🎜🎜

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"的元素，

• フィルター値が「none」ではない要素、

• パースペクティブ値が「none」ではない要素、

• isolation属性が「isolate」に設定されている要素、

• position:fixed

• これらのプロパティの値を直接指定しない場合でも、will-change で任意の CSS プロパティを指定します

• -webkit-overflow-scrolling プロパティはset"touch" 要素

したがって、上記の 2 つの p に opacity 属性を追加する目的は、スタッキング コンテキストを形成することです。つまり、不透明度を追加し、上記の属性を置き換えることで、同じ効果を得ることができます。

スタッキングコンテキストでは、その子要素も上で説明したルールに従ってスタックされます。 子要素の z-index 値は、親のカスケードのコンテキストでのみ意味があることに特に言及する価値があります。これは、親要素の z-index が親要素の別の兄弟要素よりも低く、z-index がどれほど高くても役に立たないことを意味します。子要素は です。 z-index 低于父元素另一个同级元素，子元素 z-index再高也没用。

理解上面的 stacking-level 与 stacking-context

上記の stacking-level と stacking-context を理解することが、CSS の積み重ね順序を理解する鍵となります。

🎜🎜🎜

以上がCSS のスタック順序とスタック コンテキストの詳細な紹介の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。