IE7 でドロップダウン メニューが入力フィールドの後ろに隠れるのはなぜですか?

IE7: Z インデックスの階層化の混乱を理解する

IE7 では、要素の階層化に Z インデックスを適用する際に複雑さが生じます。 Z インデックスの仕組みを理解すると、階層化の問題を効果的に解決できます。

Z インデックスとスタッキング コンテキスト

その名前に反して、Z インデックスは絶対的な尺度ではありません。 。より高い Z インデックスを持つ要素は、異なるスタッキング コンテキストに属している場合、より低い Z インデックスを持つ要素の背後に隠れることがあります。

スタッキング コンテキストは、位置決めされた要素 (絶対、相対、または固定) に対して作成されます。ただし、IE7 は、z-index のない位置決めされた要素を新しいスタッキング コンテキストの作成として誤って解釈します。

コードの問題

この例では、位置決めされたスパン ( ) には Z インデックスがありません。 IE7 はこれを新しいスタッキング コンテキストの作成として解釈し、ドロップダウン メニュー (

) を入力フィールド () の背後に非表示にします。

考えられる解決策

この問題を解決するには、次の点を考慮してください解決策:

1. Positioned Span に z-index を追加します:

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

これにより、スタッキング コンテキストが明示的に定義され、ドロップダウンが確実にオーバーラップします。入力フィールド。

2. 位置を削除スパン:

<span></span>

位置を削除すると、不要なスタッキング コンテキストが削除されます。要素はデフォルトの階層化順序に従い、ドロップダウンが入力フィールドの上に配置されます。

追加の考慮事項

• Z インデックスは、以下の要素にのみ影響します。同じスタッキング コンテキスト。
• IE6 には、選択ボックスと iframe が常にすべての上に浮くという追加のバグがあります。 else.
• より詳細な説明と同様のバグの例については、https://www.brenelz.com/blog/2009/02/03/squish-the-internet-explorer-z- を参照してください。インデックスバグ/

以上がIE7 でドロップダウン メニューが入力フィールドの後ろに隠れるのはなぜですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。