it-swarm.com.de

z-Index-Problem mit Twitter-Bootstrap-Dropdown-Menü

Ich verwende das Twitter-Bootstrap-Dropdown-Menü in einer festen Navigationsleiste oben auf meiner Seite.

Es funktioniert alles gut, aber ich habe Probleme mit den Dropdown-Menüelementen, die hinter anderen Seitenelementen angezeigt werden, anstatt vor ihnen.

Wenn ich etwas auf der Seite mit position: relative habe (wie z. B. ein Jquery-Ui-Akkordeon oder ein Google-Diagramm), wird das Dropdown-Menü dahinter angezeigt. Es wurde versucht, den z-index des DD-Menüs und der Navigationsleiste zu ändern, macht aber keinen Unterschied.

Die einzige Möglichkeit, das Menü über den anderen Inhalt zu setzen, besteht darin, den Inhalt in position: fixed; OR z-index: -1; zu ändern - aber beide Lösungen verursachen andere Probleme.

Schätzen Sie jede Hilfe, die Sie mir geben können.

Ich denke, das ist wahrscheinlich ein Standardproblem bei der CSS-Positionierung, das ich falsch verstanden habe, also keinen Code gepostet hat, aber bei Bedarf etwas tun kann.

Vielen Dank.

50
Leon

Ich habe gerade realisiert, was los ist.

Ich hatte die Navbar in einem Header, der position: fixed war; 

Der z-index in der Kopfzeile wurde geändert und jetzt funktioniert er. Vermutlich habe ich die Container nicht hoch genug gesucht, um den z-index anfangs einzustellen!

Vielen Dank.

42
Leon

IE 7 unter Windows8 mit Bootstrap 3.0.0. 

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

fest

14

Ich bin hier in denselben Fehler geraten. Das hat bei mir funktioniert.

.navbar {
    position: static;
}

Wenn Sie die Position auf statisch setzen, bedeutet dies, dass die Navigationsleiste wie üblich in den Dokumentenfluss fällt.

9
rdoll

Das wird es beheben

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

Ich hatte das gleiche Problem und nachdem ich dieses Thema gelesen hatte, konnte ich es jetzt in mein CSS einfügen:

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

denn in meinem Fall verwende ich das feste Top-Menü.

2
Fernando Vieira

Gelöst durch Entfernen des -webkit-transform aus der Navigationsleiste:

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

geplündert von https://stackoverflow.com/a/12653766/391925

2
Luke Ollett

Das Problem mit Bootstrap v3, Navbar und Dropdown hat immer noch den gleichen Z-Index ;-( Ich habe gerade das Dropdown-Menü Z-Index auf 1001 erhöht.

2
Thomas Decaux

Das hat es für mich behoben:

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

Das hat für mich funktioniert:

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

Dieses Problem wurde durch Entfernen der Eigenschaft transform: translateY(50%); behoben.

0
kabangi julius