スタッキングコンテキストとCSSについてのまとめ z-index_html/css_WEB-ITnose

要素のオーバーレイ順序を決定する HTML で最も有名な CSS プロパティは、おそらく z-index です。ただし、プロジェクト中に、いくつかの状況が私たちの期待と一致しないことがよくあります。調査に研究を重ねた結果、ついにその関係が分かりました。簡単な概要は次のとおりです:

1. Positioned (Position が静的ではない要素) 要素の z-index 属性のみが有効です
2. z-index は負の数にすることができます
3. z-index がないか無効な z を持つ要素-index (最初のバーを参照) は 0 の z-index に相当します。
4. 特定の条件を満たす要素の場合、ブラウザはそれらの要素に対してスタッキング コンテキストと呼ばれるものを作成します。 DOM ツリー構造に従って、コンテキストを積み重ねることでもツリー構造が形成されます。
5. スタッキング コンテキスト内の要素は、z-index に基づいて順番にスタックされます。 z-index が大きいものが最初になります
6. z-index レベル 0 の要素のうち、スタックコンテキストを持つ要素のスタック順序が最初になります
7. 上記の条件が区別できない場合は、DOM ツリー内の順序が使用されます積み重ねる順番を決めます。

詳細がたくさんあり、私の理解が正しいかどうかわかりません。修正は大歓迎です。

また、以下は MDN の一連の関連記事です。レイヤーごとに展開されており、非常にわかりやすく書かれており、WEBをやっている学生はそれから学ぶことができます。

z-indexを使用しないスタッキング: デフォルトのスタッキングルール

スタッキングとフロート: フローティング要素の処理方法

z-indexの追加: z-indexを使用してデフォルトのスタッキングを変更する

スタッキングコンテキスト: スタッキングコンテキストに関する注意事項

スタッキングコンテキストの例 1 : 2 レベルの HTML 階層、最終レベルの z-index

スタッキングコンテキストの例 2 : 2 レベルの HTML 階層、すべてのレベルの z-index

スタッキングコンテキストの例 3 : 3 レベルの HTML 階層、第 2 レベルの z-index