Internet Explorer で相対的に配置された要素に対して Z-index が機能しないのはなぜですか?

Internet Explorer での要素の重複: Z インデックスの難問

Web 開発の広大な領域では、要素のシームレスな配置を実現することが困難な場合があります。特に Internet Explorer の世界ではパズルです。相対的に配置された別の要素の上に要素を配置しようとすると、一般的な問題が 1 つ発生します。 z-index プロパティを利用しているにもかかわらず、重なった要素は、配置された対応する要素の背後に頑固に残ります。

謎が明らかに

Internet Explorer の特異な動作は、固有の制限に起因しています。レンダリング エンジンの。要素が相対的に配置されると、他の静的要素に干渉しない新しい座標系が確立されます。その結果、z-index プロパティは、このコンテキストでは有効性を失います。

風変わりな解決策: CSS を使ったトリック

Internet Explorer の固有の制限と戦う代わりに、その特異性を利用して、望ましい効果を達成することができます。この場合、重複する要素に背景画像を追加するという、やや意外だが効果的な解決策を採用します。

背景画像を割り当てることで、たとえ最小限であっても、基本的に Internet Explorer にエンティティを位置決めされた要素として認識させることができます。 。その結果、z-index プロパティがその能力を取り戻し、要素の階層化を制御できるようになります。

これは、この予想外ではあるが機能的な回避策を示す CSS の例です。

<code class="css">.myLinkCssClass {
    background          : url(#);
}</code>

このスタイルを追加することにより、重なった要素に規則を適用すると、Internet Explorer を騙して配置されたものとして扱う非表示の背景画像を作成します。その結果、z-index プロパティが優先されるようになり、相対的に配置された対応する要素の上に要素を配置できるようになりました。

以上がInternet Explorer で相対的に配置された要素に対して Z-index が機能しないのはなぜですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。