web-dev-qa-db-fra.com

problème d'indexage avec le menu déroulant d'amorçage Twitter

J'utilise le menu déroulant d'amorçage Twitter dans une barre de navigation fixe en haut de ma page.

Tout fonctionne bien, mais le problème avec les éléments du menu déroulant qui apparaissent derrière d'autres éléments de page plutôt que devant eux est problématique.

Si j'ai quelque chose sur la page avec position: relative (comme jquery ui accordéon ou un graphique Google), le menu déroulant apparaît derrière. J'ai essayé de changer le z-index du menu dd et de la barre de navigation, mais cela ne faisait aucune différence.

Le seul moyen d'obtenir que le menu se trouve au-dessus de l'autre contenu consiste à modifier le contenu en position: fixed; OR z-index: -1; - mais ces deux solutions entraînent d'autres problèmes.

Appréciez toute aide que vous pouvez me donner.

Je pense que c'est probablement un problème standard avec le positionnement CSS que j'ai mal compris. Je n'ai donc posté aucun code, mais je peux le faire si nécessaire.

Merci.

drop-down-menutwitter-bootstrapz-index
50
Leon

Je viens de me rendre compte de ce qui se passe.

J'ai eu la barre de navigation à l'intérieur d'un en-tête qui était position: fixed; 

Changé le z-index sur l'en-tête et cela fonctionne maintenant - suppose que je n'ai pas regardé assez haut dans les conteneurs pour définir le z-index initialement! # @ !?

Merci.

42
Leon

Internet Explorer 7 sur Windows 8 avec bootstrap 3.0.0. 

.navbar {
  position: static;
}
.navbar .nav > li {
  z-index: 1001;
}

fixé

14
Primož Klemenšek

Couru dans le même bug ici. Cela a fonctionné pour moi.

.navbar {
    position: static;
}

En définissant la position sur statique, cela signifie que la barre de navigation tombera dans le flux du document comme d'habitude.

9
rdoll

Cela va le réparer

.navbar .nav > li {
z-index: 10000;
}
8
parkerproject

J'ai eu le même problème et après avoir lu ce sujet, j'ai résolu de l'ajouter à mon CSS:

.navbar-fixed-top {
    z-index: 10000;
}

parce que dans mon cas, j'utilise le menu supérieur fixe.

2
Fernando Vieira

Résolu en supprimant le -webkit-transform de la barre de navigation:

-webkit-transform: translate3d(0, 0, 0);

pillé de https://stackoverflow.com/a/12653766/391925

2
Luke Ollett

Le problème avec Bootstrap v3, la barre de navigation et la liste déroulante ont toujours le même index z ;-( Je viens d’augmenter le z-index du menu déroulant à 1001.

2
Thomas Decaux

Cela a résolu le problème pour moi:

.navbar-wrapper {
  z-index: 11;
}
1
JochenJung

Cela a fonctionné pour moi:

.dropdown, .dropdown-menu {
  z-index:2;
}
.navbar {
  position: static;
  z-index: 1;
}
0
thouliha

Résolu ce problème en supprimant la propriété transform: translateY(50%);.

0
kabangi julius