Z インデックスは絶対的ですか、それとも相対的ですか?

Z インデックス: 相対か絶対?

Z インデックス プロパティを扱うときは、その性質を理解することが重要です。絶対的または相対的なスタック順序。答えは、以下で説明する「z-index モデル」で示されているように、その相対的な性質にあります。

Z-Index は相対的です

z-index プロパティは、次のことを決定します。 Web ページ内の要素の積み重ね順序。ただし、その位置はページ内で絶対的なものではなく、親要素に対して相対的なものです。これは、より高い Z インデックスを持つ要素が、同じ親内の兄弟要素の前に表示されることを意味します。

Z インデックスの決定

Z-インデックスは階層プロセスに従います:

1. 初期 Z-インデックス割り当て: body 要素の直接の子ノードには、昇順で初期 Z インデックス値 1 が割り当てられます。
2. 手動 Z インデックス調整: 要素に手動でz-index プロパティを設定すると、その値が考慮されます。
3. ドキュメント内の位置ツリー: Z インデックス値が等しい場合、ドキュメント ツリー内の要素の相対位置によって重なり順が決まります。

例

次の HTML コードを考えてみましょう:

<div id="X" style="z-index:1">
  <div id="Y" style="z-index:3"></div>
</div>
<div id="Z" style="z-index:2"></div>

#Y が #Z と重なるのは直感的にわかるかもしれませんが、その理由は次のとおりです。 Z インデックスが高いほど、現実は異なります。 #Y は #X の直接の子 (z-index は 1) であるため、#Z はドキュメント ツリー内でのスタック順序が高いため、#X と #Y の両方の前に表示されます。

以上がZ インデックスは絶対的ですか、それとも相対的ですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。