Pourquoi mes listes déroulantes Bootstrap apparaissent-elles derrière d'autres éléments dans Internet Explorer 7 ?

Les listes déroulantes Bootstrap apparaissent derrière d'autres éléments [Dupliquer]

Problème :

Dans Bootstrap 2.3 .1, les menus déroulants créés à l'aide de la classe "dropdown-menu" apparaissent derrière le texte et d'autres éléments sur Internet Explorer 7 en particulier, malgré l'attribution d'un z-index élevé.

Diagnostic :

Le problème vient d'un problème de contexte d'empilement. Même si la liste déroulante possède un z-index, elle ne s'applique qu'aux éléments situés dans le même contexte d'empilement. Dans ce cas, l'élément parent de la liste déroulante a besoin d'un z-index et d'une position explicites pour établir un nouveau contexte d'empilement.

Solution :

Modifiez le CSS comme suit :

<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>

En définissant « z-index : 10000 » et « position : relative » sur « .header-top », un nouveau contexte d'empilement est créé. Les menus déroulants dans ce contexte se voient ensuite attribuer un « z-index : 1 » pour garantir qu'ils sont positionnés devant tout autre contenu dans ce contexte. Cela établit la superposition souhaitée et résout le problème dans Internet Explorer 7.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!