Warum erscheinen Bootstrap-Dropdowns hinter anderen Elementen in IE7?

Bootstrap-Dropdowns erscheinen hinter anderen Elementen im IE7

Bootstrap 2.3.1 ermöglicht die Erstellung von Dropdown-Menüs mithilfe des „Dropdown-Menüs“. Klasse. Benutzer sind jedoch auf ein Problem gestoßen, bei dem diese Menüs im IE7 hinter anderen Elementen angezeigt werden, obwohl die CSS-Eigenschaft „z-index“ festgelegt wurde.

Verstehen des Problems: Stapelkontext

Um dieses Problem zu lösen, muss man das Konzept des Stapelkontexts verstehen. Ein Stapelkontext ist ein dreidimensionaler Raum, in dem Elemente in der Reihenfolge gestapelt werden, in der sie im HTML-Code erscheinen. Das Dropdown-Menü wird hinter anderen Elementen angezeigt, da es sich in einem anderen Stapelkontext befindet als die Überlagerungen, über denen es schweben soll.

Behebung des Problems: Einrichten eines Stapelkontexts

Um einen Stapelkontext für das Dropdown-Menü einzurichten, müssen ein Z-Index und eine Position für ein übergeordnetes Element festgelegt werden. In diesem Fall ist das Header-Top-Div eine geeignete Wahl. Hier ist die CSS-Änderung:

.header-top {
  z-index: 100;
  position: relative;
}

Indem der Z-Index auf einen höheren Wert als andere Elemente gesetzt und eine Position zugewiesen wird, erstellt das Header-Top-Div einen neuen Stapelkontext für das Dropdown-Menü. Dadurch wird sichergestellt, dass das Menü über allen anderen Elementen erscheint.

Das obige ist der detaillierte Inhalt vonWarum erscheinen Bootstrap-Dropdowns hinter anderen Elementen in IE7?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!