HTML における Z インデックスは絶対ですか、それとも相対ですか?

Z-Index: 絶対または相対?

Web 開発では、z-index プロパティは HTML 要素の積み重ね順序を制御します。ただし、よくある疑問が生じます: 要素の Z インデックスは絶対ですか、それとも相対ですか?

絶対 Z-インデックスと相対 Z-インデックス

Z インデックス プロパティは、3 次元での要素の位置を定義します。兄弟との比較。ページ全体の 3 次元レイアウト内での要素の位置は決定されません。したがって、z-index は 要素の親に相対的です。

この例では:

<code class="html"><div style="z-index:-100">
    <div id="dHello" style="z-index:200">Hello World</div>
</div>

<div id="dDomination" style="z-index:100">I Dominate!</div></code>

#dHello は親 div の下にネストされます。より高い Z インデックス (200) を持っているにもかかわらず、 #dDomination の 後ろ に表示されます。これは、後者には 100 の兄弟 Z-インデックスがあるためです。これは、Z インデックスが親 div を基準にしているためです。

標準とブラウザのバリエーション

W3C は、z-index プロパティを親要素に対する相対として定義しています。ただし、ブラウザごとに実装が異なる場合があります。

1. ほとんどのブラウザでは、z インデックスは親の計算された z インデックスを基準にしており、通常は 0 です。
2. Internet Explorer 6 以前では、z-index はドキュメント ルートに相対的でした。
3. では、** Safari と Chrome、同じ z を持つ要素-index は、ページ ソース内の位置に基づいて順序付けされます。

視覚化の例

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

<code class="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></code>

最初は、 # Y は、Z インデックスが高いため #Z と重なります。ただし、#Y は #X (z-index が 1) の子であるため、#Z は #X と #Y の両方の前に表示されます。

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