Z-Index の動作が IE 6 と IE 7 で異なるのはなぜですか?

IE 6 および IE 7 Z インデックス: スタッキング コンテキストの背後

IE 6 または IE 7 を使用する場合、予期しない問題が発生する可能性があります。 z-index プロパティを使用して要素をスタックしようとしたときの動作。この問題を理解するには、CSS の「コンテキストの積み重ね」の概念を詳しく理解することが不可欠です。

コンテキストの積み重ね

CSS 仕様によると、z-index コントロールは同じ「積み重ねコンテキスト」内の要素の積み重ね順序。スタッキング コンテキストは、要素に非自動位置 (絶対、固定、または相対) と指定された Z インデックス値がある場合に確立されます。

IE のスタッキング異常

IE 6 と IE 7 は、配置された要素 (z-index が明示的に指定されていないものであっても) が暗黙的に新しいスタッキングを作成するという点で他のブラウザーより際立っています。コンテキスト。この動作は CSS 仕様から逸脱しています。

Z-Index の動作への影響

IE 6 および IE 7 では、2 つの要素に Z-index が設定されている場合、比較スタック順序の決定は、スタックの親 (通常は位置的に非静的な祖先) のレベルで行われます。これらの親に Z インデックスが指定されていない場合、ドキュメントの順序によってスタックが決まります。

回避策

この問題を解決するには、スタックする親の Z インデックス値を明示的に設定します。正しく積み重ねたい要素を選択します。下位の親から開始してネスト階層を上に向かって進み、降順の Z インデックス値を割り当てて適切な順序を確保します。

IE 6 および IE 7 でのコンテキストのスタックの動作を理解することで、Z インデックスを効果的に操作できます。 -index プロパティを使用して、予期しない結果を招くことなく望ましいスタッキング結果を実現します。

以上がZ-Index の動作が IE 6 と IE 7 で異なるのはなぜですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。