Z インデックスの積み重ね順序は親要素の Z インデックスに依存しますか?

要素の Z インデックス測定は絶対ですか、それとも相対ですか?

Web ページ上の要素の位置は、その Z によって決まります。 -インデックススタイル。ただし、スタック順序の絶対的な性質や親要素との相対性に関して懸念が生じています。この記事は、ブラウザ実装の差異というコンテキスト内でこれらの懸念に対処することを目的としています。

確立された標準から始めて、z-index は確かに相対プロパティであり、直接の親に対する要素のスタック順序を示します。これは、要素のスタック動作がその親の Z インデックスによってのみ影響されることを意味します。

この概念を説明するために、次のシナリオを考えてみましょう。

<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 は次のことを行う必要があります。は、親の z-index が負 (-100) であるにもかかわらず、その z-index 200 が #dDomination の 100 より高いため、#dDomination の前に表示されます。

ただし、ブラウザの実装により矛盾が生じています。一部のブラウザでは、公式の定義と矛盾する場合でも、親要素の Z インデックスが考慮されます。したがって、このような場合、#dDomination は #dHello の前に表示されることがあります。

ブラウザ実装のバリエーション:

• Internet Explorer:以前のバージョンでは親の Z インデックスが無視されていましたが、新しいバージョンでは親の Z インデックスが考慮されます。
• Firefox: 常に親の Z-インデックスを考慮します。
• Chrome および Safari: 通常は相対 Z インデックス モデルに従いますが、特定のシナリオでは親の Z インデックスが考慮される可能性があります。

結論:

Z -index は本質的に相対プロパティです。ただし、ブラウザの実装により、その動作に差異が生じる可能性があります。一貫した結果を得るには、CSS 仕様で説明されている相対モデルを使用し、ブラウザ固有の例外が発生する可能性があることに注意することをお勧めします。

以上がZ インデックスの積み重ね順序は親要素の Z インデックスに依存しますか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。