IE 6 および IE 7 の Z インデックスの問題 質問する

ここにある回答のほとんどは間違っています。いくつかは機能しますが、記載されている理由とは異なります。ここで説明をします。

これはZインデックスの動作方法に従っています。スペック:

• どの要素にも値を与えることができますz-index。与えない場合はデフォルトでauto
• 配置された要素（つまり、positionデフォルトとは異なる属性を持つ要素static）とz-index異なる属性を持つ要素は、auto新しい要素を作成します。スタッキングコンテキストスタッキング コンテキストは、重なりの「単位」です。1 つのスタッキング コンテキストは、別のコンテキストより完全に上に位置するか (つまり、最初のコンテキストのすべての要素が 2 番目のコンテキストのどの要素よりも上に位置する)、または完全に下に位置するかのいずれかです。
• 同じスタッキングコンテキスト内では、スタックレベル要素の値が比較されます。明示的なz-index値を持つ要素は、その値をスタック レベルとして持ち、他の要素は親から継承します。スタック レベルが高い要素が上に表示されます。2 つの要素が同じスタック レベルを持つ場合、通常は DOM ツリー内で後にある要素が上に描画されます (属性が異なる場合は、より複雑なルールが適用されますposition)。

つまり、2 つの要素がz-index設定されている場合、どちらを上に表示するかを決定するには、それらの要素に、同様にz-index設定されている配置済みの親があるかどうかを確認する必要があります。親がない場合、または親が共通である場合は、Z インデックスが高い方が優先されます。親がある場合、親を比較する必要があり、z-index子の は関係ありません。

したがって、 は、その「スタッキング親」（のセットと、または を持つz-index最も近い祖先）の他の子と比較して要素がどのように配置されるかを決定しますが、他の要素と比較する場合は重要ではありません。重要なのはスタッキング親の（またはスタッキング親のスタッキング親の など）です。 をドロップダウン メニューやポップアップなどの少数の要素のみに使用し、そのいずれも他の要素を含まない一般的なドキュメントでは、 を持つすべての要素のスタッキング親はドキュメント全体であり、 をグローバルなドキュメント レベルの順序付けとして考えることができます。z-indexpositionrelativeabsolutefixedz-indexz-indexz-indexz-indexz-index

IE6/7 との基本的な違いは、位置指定要素は、z-index設定されているかどうかに関係なく、新しいスタッキング コンテキストを開始することです。直感的にz-index値を割り当てる要素は通常、絶対位置指定され、相対位置指定の親または近い祖先を持つため、z-index-ed 要素はまったく比較されず、代わりに位置指定の祖先が比較されます。祖先には z-index が設定されていないため、ドキュメントの順序が優先されます。

回避策としては、実際に比較される祖先を見つけて、それらに z-index を割り当てて、必要な順序 (通常は逆ドキュメント順序) を復元する必要があります。通常、これは JavaScript によって行われます。ドロップダウン メニューの場合は、メニュー コンテナーまたは親メニュー項目を調べて、z-index1000、999、998 などを割り当てることができます。別の方法: ポップアップ メニューまたはドロップダウン メニューが表示されたら、相対的に配置されている祖先をすべて見つけて、on-top非常に高い z-index を持つクラスを割り当てます。再び非表示になったら、クラスを削除します。