Warum ist mein Dropdown-Menü in IE7 hinter meinem Eingabefeld versteckt?

IE7: Die Z-Index-Layering-Verwirrung verstehen

IE7 stellt Komplexitäten bei der Anwendung des Z-Index für die Element-Layering dar. Wenn Sie verstehen, wie der Z-Index funktioniert, können Sie Schichtungsprobleme effektiv lösen.

Z-Index und Stapelkontexte

Im Gegensatz zu seinem Namen ist der Z-Index kein absolutes Maß . Elemente mit einem höheren Z-Index können hinter Elementen mit einem niedrigeren Z-Index ausgeblendet werden, wenn sie zu unterschiedlichen Stapelkontexten gehören.

Für positionierte Elemente (absolut, relativ oder fest) wird ein Stapelkontext erstellt. Allerdings interpretiert IE7 positionierte Elemente ohne Z-Index fälschlicherweise als Erstellung neuer Stapelkontexte.

Das Problem in Ihrem Code

In Ihrem Beispiel haben Sie eine positionierte Spanne ( <span>), dem ein Z-Index fehlt. IE7 interpretiert dies als die Erstellung eines neuen Stapelkontexts, wodurch das Dropdown-Menü (

) hinter dem Eingabefeld () ausgeblendet wird.

Mögliche Lösungen

Um das Problem zu beheben, ziehen Sie die folgenden Lösungen in Betracht:

1. Z-Index zum hinzufügen Positionierte Spanne:

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

Dies definiert explizit den Stapelkontext und stellt sicher, dass das Dropdown-Menü das Eingabefeld überlappt.

2. Position aus der Spanne entfernen :

<span>

Durch das Entfernen der Position beseitigen Sie den unnötigen Stapelkontext. Die Elemente folgen nun der standardmäßigen Ebenenreihenfolge, wobei das Dropdown-Menü über dem Eingabefeld positioniert ist.

Zusätzliche Überlegungen

• Z-Index betrifft nur Elemente darin derselbe Stapelkontext.
• IE6 hat einen zusätzlichen Fehler, bei dem Auswahlfelder und Iframes immer über allem schweben sonst.
• Eine detailliertere Erklärung und ein ähnliches Fehlerbeispiel finden Sie unter: https://www.brenelz.com/blog/2009/02/03/squish-the-internet-explorer-z- index-bug/

Das obige ist der detaillierte Inhalt vonWarum ist mein Dropdown-Menü in IE7 hinter meinem Eingabefeld versteckt?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!