Z インデックスが Internet Explorer 7 で機能しないのはなぜですか?

IE7 Z-Index の階層化の問題: コンテキストの積み重ねのジレンマ

CSS プロパティの Z-index により、HTML 要素の階層化が可能になりますウェブページ上で。ただし、Internet Explorer 7 (IE7) は、z-index 階層化で異常な動作を示します。

このシナリオでは、開発者は、div と重複することを意図して、UL リストに高い z-index (1000) を設定しました。 。ただし、div は UL の前に表示されたままでした。問題は、IE7 のスタッキング コンテキストの解釈にあります。

スタッキング コンテキストは、ブラウザーのレンダリング プロセスで作成される独立したレイヤーであり、z-index 値は各コンテキスト内で個別に評価されます。 IE7 は、CSS 仕様でそのように規定されているにもかかわらず、明示的な Z-インデックスのない位置決めされた要素を新しいスタッキング コンテキストの作成として解釈します。

この問題を解決するには、明示的な Z-インデックス値を位置決めされた Span 要素に追加します。

#envelope-1 {
    position: relative;
    z-index: 1;
}

これにより、スパンの新しいスタッキング コンテキストが作成され、UL リストが div と確実にオーバーラップします。

または、スパンでのposition:relativeの使用を避けるようにドキュメントを再設計します。これにより、個別のスタッキング コンテキストの作成が強制されるためです。

<div>
    <label>Input #1:</label> <input>
    <ul>
        <li>item</li>
        <li>item</li>
        <li>item</li>
        <li>item</li>
    </ul>
</div>

スタッキング コンテキストの概念を理解し、 IE7 での解釈により、開発者は、ブラウザー固有の不一致に直面した場合でも、要素の階層化を効果的に制御できます。

以上がZ インデックスが Internet Explorer 7 で機能しないのはなぜですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。