IE6 と 7 で Div のスタック順序が異なる動作をするのはなぜですか?

Internet Explorer 6 および 7 の Z-Index の問題

問題:
2 つの Web ページ内divs、div#sign-post は div#bottom の上に表示されるはずですが、これは Internet Explorer 以外のブラウザでのみ発生します(IE) 6 および 7。さらに、IE6 は div#bottom の上部に追加の 198 ピクセルを表示します。

解決策:

Z インデックスについてIE6/7 の

ほとんどのブラウザでは、z-index プロパティ割り当てられた値に基づいて要素を他の要素の上または下に積み重ねることができます。ただし、IE6 および 7 では、配置された要素は、z-index 値に関係なく新しいスタッキング コンテキストを作成します。

問題

この場合、div#sign-post はdiv#bottom よりも高い z-index ですが、IE6/7 は親のスタッキング コンテキストを比較します。IE では位置決めされた要素自体によって作成されます。 div#sign-post も div#bottom も z-index 値を明示的に設定していないため、ドキュメントの順序によってスタックが決まり、div#bottom が一番上に表示されます。

回避策:

この問題を解決するには、影響を受ける祖先の位置に Z インデックス値を割り当てる必要があります。要素。

1. スタッキング コンテキストを作成する、配置された祖先を特定します。
2. JavaScript または CSS を使用して、これらの祖先に高い Z インデックスを割り当て、望ましいスタッキング順序を強制します。

たとえば、div#parent に div#sign-post が含まれる場合、z-index として 1000 を割り当てます。

IE6 の追加の問題

IE6 の div#bottom の上部にある余分な 198 ピクセルは、デフォルトのマージンの内部計算。この問題は、div#bottom のマージンを明示的に 0px に設定することで解決できます。

以上がIE6 と 7 で Div のスタック順序が異なる動作をするのはなぜですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。