いくつかの興味深い CSS トピックについて話しましょう (3) – スタック順序とスタック コンテキストについてどのくらい知っていますか?

このシリーズを開始して、いくつかの興味深い CSS トピックについて説明します。実用性はさておき、いくつかのトピックは、問題を解決するためのアイデアを広げることを目的としています。また、見落とされがちな CSS の詳細も含まれています。

問題を解決する際に互換性は考慮されません。質問は自由で、思いついたことを何でも言ってください。問題を解決する際に馴染みのない CSS プロパティがある場合は、できるだけ早く学習してください。

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

すべてのトピックは私の Github にまとめられています。

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

実際、さらに深く進むと、中に何かがあることがわかります。

z-index 看上去其实很简单，根据 z-index以下の質問を見て、2 つの

タグを定義してください。 HTML の構造は次のとおりです:

div A 和 B，被包括在同一个父 div リーリー

それらの

の定義は次のとおりです:

CSS リーリー

ざっくり説明すると、同じ親コンテナを持つ2つのDIVが重なっている

ということでしょうか。

display:inline-block 叠在上面，还是float:leftここでの DOM の順序に注意してください。最初に生成されます

。もちろん、次のように 2 つの DOM の順序を逆にすることもできます:

display:inline-block ，再生成 float:left リーリー

会发现，无论顺序如何，始终是 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;
}

デモで私を突いてください。

上記 inline-block 的 div 不再一定叠在 float 的 div では、HTML コード内の DOM のスタック順序に関係していることがわかります。後で追加された div は、最初に追加された div の上にスタックされます。

ここで重要なポイントは、追加された opacity:0.9 这个让两个 div 都生成了 stacking context（堆叠上下文） の概念です。このとき、2 つをスタックするには、z-index が必要であり、z-index が大きいほど、スタック レベルが高くなります。

スタッキング コンテキストは HTML 要素の 3 次元の概念であり、これらの HTML 要素は、ウィンドウ (コンピューター画面) または Web ページに面しているユーザーを基準にして、優先順位に従ってスタッキング コンテキストを占めます。独自の空間に。

では、要素の形成をトリガーするにはどうすればよいでしょうか 堆叠上下文?方法は次のとおりです。MDN からの抜粋です:

• ルート要素 (HTML)、
• z-index 値は「自動」ではありません。絶対/相対位置決め、
• 「auto」以外の z-index 値を持つフレックス項目、つまり: 親要素の表示: flex|inline-flex、
• 不透明度属性値が 1 未満の要素 (不透明度の仕様を参照)、
• Transform 属性値が「none」要素ではありません。
• mix-blend-mode 属性値は「通常の」要素ではありません。
• フィルター値が「なし」ではない要素、
• 視点値が「なし」ではない要素、
• 分離属性が「isolate」に設定されている要素、
• 位置: 固定
• これらのプロパティの値を直接指定しない場合でも、will-change で CSS プロパティを指定します
• -webkit-overflow-scrolling 属性が「touch」に設定された要素

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

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

上記のことを理解する stacking-level 与 stacking-context が、CSS のカスケード順序を理解するための鍵です。

より多くの交流を得るために、すべてのトピックは私の Github にまとめられ、ブログに投稿されます。

この記事はこれで終わりです。まだ質問や提案がある場合は、オリジナルの記事ですので、記事に何か間違っている点があれば、お知らせください。私にお知らせください。