CSS で z-index 制御要素はどのようにオーバーラップしますか?

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

スタック順序により、Web ページ上で要素が重なる順序が決まります。 z-index プロパティは、重なり順を制御するために使用され、他の要素の前に表示される要素に高い値を与えます。

位置と z-index について

z-index は、位置指定された要素 (絶対、相対、固定、スティッキー) および位置を持つフレックスまたはグリッド項目に適用されます。 static.

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

要素が配置されると、スタッキング コンテキストが作成され、z-index スコープが要素とその子孫に制限されます。

重なり順

Z インデックスのないスタック順序では、要素は次の順序に従います。

1. ルート要素の背景と境界線
2. 非配置 (静的) ブロック、次にフローティング要素 (出現順)
3. インライン要素
4. 配置された要素 (順序外観)

Z インデックス付き:

1. ルート要素の背景と境界線
2. Z インデックス付きで配置された要素
3. 0
4. 非配置ブロック、その後フローティング要素 (出現順)
5. インライン要素
6. 配置要素 (出現順)

配置済みz-index > の要素0

例

混合兄弟 div:
• Div1: 位置: 相対、z-索引： 10;
• Div2: 位置: 静的;

Div3: 位置: 固定、z-index: 20;

Div3 は Div1 と Div2 と重複しますが、Div1 Div2 と重複します。

ネストされて混合されますdivs:
• Div1: 位置: 絶対、z インデックス: 10;
• Div2: 位置: 静的;
• Div3: 位置: 固定、 z-index: 20;

Div4: 位置: 相対、 z-index: 15;

Div3 はすべての div と重複します。 Div4 は Div1 と Div2 に重なり、Div1 は Div2 に重なります。

以上がCSS で z-index 制御要素はどのようにオーバーラップしますか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。