html - z-index は同じグループ内のアイテムにのみ影響しますか?

Question

別の領域にあるが、z-indexが高いため、一番上にあるHTMLに何かを入れようとしていました。それはどのように機能しますか？

私の例は次のようなものです：

<div>
   <div style="z-index: 7000"></div>
</div>
<div style = "z-index: 7050"></div>

z-index は DOM ツリー内の兄弟にのみ関係があると考えていました。

これについて皆さんはどう思いますか？

Answer 1

この画像はそれをうまくまとめています。

スタッキングコンテキスト内でz-indexプロパティがどのように機能するかについての良い記事をここで見つけることができます

Answer 2

クリスがすでに指摘したように、z-indexプロパティが配置された要素にのみ適用されることが重要です。仕様によると、プロパティは同じスタッキングコンテキストz-index内の要素の配置を定義します。すべての要素が新しいスタッキングコンテキストを生成するわけではありません！したがって、はDOMツリー内の兄弟だけでなく、同じスタッキングコンテキスト内のすべての要素にも関連します。仕様によると、プロパティに整数の代わりに含まれる要素は、新しいスタッキングコンテキストを生成しません。z-indexautoz-index

Answer 3

はい/いいえ、親要素が相対的な位置に設定されている場合、同じグループ内のものにのみ影響します。その時点からその内部にあるものはすべて、それに基づいて継承されます。

ただし、上記のhtmlに基づいて私が見たものから。z-index言うことで要素がDOMフローから切り離されていないため、言うまでもなく値を保持しません。z-index は位置を持つ要素用です: 固定または絶対

例：

<div style="z-index:100;"></div>

何もしません

<div>
<div style="z-index:100;"></div>
</div>

何もしません

<div style="position:relative;width:100px;height:100px;">
   <div style="z-index:100;position:absolute;top:0;left:0;background-color:#000;"></div>
   <div style="z-index:200;position:absolute;top:25px;left:25px;background-color:#CCC;"></div>
</div>

何かを行い、要素を親 div 内に保持します。

<div style="width:100px;height:100px;">
   <div style="z-index:100;position:absolute;top:0;left:0;background-color:#000;"></div>
   <div style="z-index:200;position:absolute;top:25px;left:25px;background-color:#CCC;"></div>
</div>

何かを行いますが、z-index を持つ div は、親要素ではなく、自分自身をどこに配置するかを決定する媒体としてブラウザーを使用します。