drop down menu - Problema z-index con el menú desplegable de arranque de twitter

drop-down-menu twitter-bootstrap

Question

Estoy usando el menú desplegable de Twitter bootstrap en una barra de navegación fija en la parte superior de mi página.

Todo funciona bien, pero tengo problemas con los elementos del menú desplegable que se muestran detrás de otros elementos de página en lugar de delante de ellos.

Si tengo algo en la página con position: relative (como jquery ui acorordion, o google chart), el menú desplegable se muestra detrás de él. Intentó cambiar el z-index del menú dd y de la barra de navegación, pero no hace ninguna diferencia.

La única forma en que puedo hacer que el menú se ubique sobre el otro contenido es cambiar el contenido a la position: fixed; O z-index: -1; -pero ambas soluciones causan otros problemas.

Aprecia cualquier ayuda que puedas darme.

Creo que este es probablemente un problema estándar con el posicionamiento de CSS que he entendido mal, por lo que no he publicado ningún código, pero puedo hacerlo si es necesario.

Gracias.

Answer 1

Aun así, el problema con Bootstrap v3, barra de navegación y menú desplegable tiene el mismo índice z ;-( Acabo de aumentar .downdown-menu z-index a 1001.

Answer 2

Encontré el mismo error aquí. Esto funcionó para mí.

.navbar {
    position: static;
}

Al establecer la posición en estática, significa que la barra de navegación caerá en el flujo del documento como lo haría normalmente.

Answer 3

Esto funcionó para mí:

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

Answer 4

Esto lo arreglará

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

Answer 5

Esto me lo arregló:

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

Answer 6

IE 7 en windows8 con bootstrap 3.0.0.

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

fijo

Answer 7

Me di cuenta de lo que está pasando.

Tenía la barra de navegación dentro de un encabezado que era position: fixed ;

Cambié el z-index en el encabezado y está funcionando ahora. ¡Supongo que no me veía lo suficientemente alto en los contenedores para establecer inicialmente el z-index ! # @ !?

Gracias.

Answer 8

Resolvió este problema eliminando la transform: translateY(50%); propiedad.

Answer 9

Resuelto al eliminar la -webkit-transform -webkit de la barra de navegación:

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

saqueado de https://.com/a/12653766/391925

Answer 10

Tuve el mismo problema y después de leer este tema, he resuelto agregar esto a mi CSS:

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

porque en mi caso, estoy usando el menú superior fijo.