CSS z-index は HTML 要素の積み重ね順序をどのように制御しますか?

z-index のスタック順序を理解する

z-index を使用して要素を配置する

CSS の z-index プロパティは、配置された要素のスタック順序を決定します。具体的には、3 次元平面上の深さを表す Z 軸上でどの要素が他の要素の前または後ろに表示されるかを指定します。

配置された要素への影響

Z インデックスのみが機能します。静的以外の位置を持つ要素 (つまり、絶対、相対、固定、またはスティッキー)。静的な位置を持つ要素、または float を使用して配置された要素には影響しません。

スタッキング コンテキスト

スタッキング コンテキストは、要素が配置され、Z インデックスが適用されるときに作成されます。スタッキング コンテキスト内では、z-index プロパティによって、配置された要素とその子孫のスタック順序が設定されます。コンテキストをスタックすると、あるコンテキスト内の要素が別のコンテキスト内の要素のスタック順序に干渉するのを防ぎます。

スタック順序ルール

Z インデックスが指定されていない要素のスタック順序は次のとおりです。

1. ルート要素の背景と境界線
2. 位置なし、非浮動ブロック要素
3. 非配置浮動要素
4. インライン要素
5. 配置要素

z-index プロパティが適用される場合、重なり順が変更されます:

1. の背景と境界線ルート要素
2. z-index が 0 未満の位置決めされた要素
3. 非位置決め、非浮動ブロック要素
4. 非位置決め浮動要素
5. インライン要素
6. Z インデックスを持つ配置要素0
7. z-index が 0 より大きい要素を配置

積み重ね順の例

兄弟

の有無を混合位置:

• div.sibling-1 の位置は静的、z-index: 0
• div.sibling-2 の位置は絶対、z-index: 1

結果: div.sibling-2 が表示されます

兄弟

とネストされた

• • div.container には、position: static、z-index: があります。 0
  • div.child-1 の位置は静的、z インデックスは 0
div.child-2 の位置は絶対、z インデックスは 1

div.sibling には、相対位置と z-index があります。 2

結果: div.sibling は、異なるスタッキング コンテキストでより高い Z インデックスで配置されているため、両方の子 div の前に表示されます。

以上がCSS z-index は HTML 要素の積み重ね順序をどのように制御しますか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。