problema z-index con menu a tendina bootstrap di twitter

Question

Sto usando il menu a discesa di bootstrap di twitter in una barra di navigazione fissa nella parte superiore della mia pagina.

Funziona tutto bene ma sto avendo problemi con le voci del menu a discesa che mostrano dietro altri elementi di pagina piuttosto che di fronte a loro.

Se ho qualcosa nella pagina con position: relative (come jquery ui fisarmonica, o un grafico di google), il menu a discesa mostra dietro di esso. Ho provato a cambiare il z-index del menu dd e della barra di navigazione, ma non fa alcuna differenza.

L'unico modo per ottenere il menu sopra l'altro è di modificare il contenuto in position: fixed; O z-index: -1; -ma entrambe queste soluzioni causano altri problemi.

Apprezzare qualsiasi aiuto tu possa darmi.

Penso che questo sia probabilmente un problema standard con il posizionamento CSS che ho frainteso, quindi non ho postato alcun codice, ma posso farlo se necessario.

Grazie.

Answer 1

Ho appena realizzato cosa sta succedendo.

Avevo la barra di navigazione all'interno di un'intestazione che era position: fixed;

Modificato il z-index nell'intestazione e funziona ora - credo che non ho visto abbastanza alto i contenitori per impostare il z-index inizialmente! # @ !?

Grazie.

Answer 2

Questo lo risolverà

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

Answer 3

risolto rimuovendo il -webkit-transform dalla barra di navigazione:

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

saccheggiarono da https://stackoverflow.com/a/12653766/391925

Answer 4

Ancora la questione con Bootstrap v3, barra di navigazione e menu a discesa ho lo stesso z-index ;-(Ho appena aumentato .dropdown-menu z-index a 1001.

Answer 5

questa fissa per me:

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

Answer 6

incontrato lo stesso problema qui. Questo ha funzionato per me.

Impostando la posizione su statico, significa che la barra di navigazione cadrà nel flusso del documento normalmente.

Answer 7

IE 7 su windows8 con bootstrap 3.0.0.

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

fisso

Answer 8

Ho avuto lo stesso problema e dopo aver letto questo argomento, ho risolto aggiungendo questo al mio CSS:

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

perché nel mio caso, sto usando il menu superiore fisso.

Answer 9

questo ha funzionato per me:

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

Answer 10

risolto questo problema rimuovendo transform: translateY(50%); proprietà.