Internet Explorer 6 および 7 の Div に関する Z-Index の問題を解決するにはどうすればよいですか?

Internet Explorer 6 および 7 の Z インデックスの問題

問題:

Web サイト上http://madisonlane.businesscatalyst.com、次の場所で問題が発生します。 div#sign-post は、div#bottom の上に表示されるはずであるにもかかわらず、 div#bottom と重なりません。さらに、IE6 では、div#bottom の上部に追加の 198 ピクセルが表示されます。

Z-Index とスタッキング コンテキストについて

Z-index プロパティは階層化を決定します。 HTML 内の要素の数。ただし、IE6 と IE7 では、標準の動作が若干異なります。

仕様によれば、デフォルト以外の位置属性を持つ要素は、新しい「スタッキング コンテキスト」を作成します。同じスタッキング コンテキスト内の要素は、z-index 値に基づいて比較され、より高い値を持つ要素が一番上に表示されます。

指定された Web サイトの場合、IE6 と IE7 がスタッキングを作成するために問題が発生します。 div#sign-post と div#bottom の両方のコンテキスト (明示的な z-index 値が欠如している場合でも)。その結果、ドキュメントの順序は、必要な Z インデックスの順序を上書きします。

解決策:

この問題を解決するには、次のように機能する親要素を作成する必要があります。 div#sign-post と div#bottom の両方の「スタッキング親」。この要素には、デフォルト以外の位置属性 (相対または絶対) と明示的な z-index 値が必要です。

そうすることで、div#sign-post と div#bottom の順序が保証されます。同じスタッキング コンテキスト内で決定され、必要な z-index の優先順位が確立されます。

以上がInternet Explorer 6 および 7 の Div に関する Z-Index の問題を解決するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。