Warum werden meine Bootstrap-Dropdown-Menüs in Internet Explorer 7 hinter anderen Elementen angezeigt?

Bootstrap-Dropdowns erscheinen hinter anderen Elementen [Duplikat]

Problem:

In Bootstrap 2.3 .1 werden Dropdown-Menüs, die mit der Klasse „dropdown-menu“ erstellt wurden, insbesondere in Internet Explorer 7 hinter Text und anderen Elementen angezeigt, obwohl ein hoher Z-Index zugewiesen wurde.

Diagnose:

Das Problem ist auf ein Stapelkontextproblem zurückzuführen. Obwohl das Dropdown-Menü einen Z-Index hat, gilt es nur für Elemente innerhalb desselben Stapelkontexts. In diesem Fall benötigt das übergeordnete Element des Dropdowns einen expliziten Z-Index und eine explizite Z-Position, um einen neuen Stapelkontext einzurichten.

Lösung:

Ändern Sie das CSS wie folgt :

<code class="CSS">.header-top {
  z-index: 10000;
  position: relative;
}

.header .header-nav ul#nav-account ul.dropdown-menu,
.header .header-nav ul#nav-library ul.dropdown-menu {
  z-index: 1;
}</code>

Durch das Setzen von „z-index: 10000“ und „position: relative“ auf „.header-top“ wird ein neuer Stapelkontext erstellt. Den Dropdown-Menüs in diesem Kontext wird dann ein „Z-Index: 1“ zugewiesen, um sicherzustellen, dass sie vor allen anderen Inhalten in diesem Kontext positioniert werden. Dadurch wird die gewünschte Schichtung hergestellt und das Problem in Internet Explorer 7 behoben.

Das obige ist der detaillierte Inhalt vonWarum werden meine Bootstrap-Dropdown-Menüs in Internet Explorer 7 hinter anderen Elementen angezeigt?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!