Ich bin heute auf ein kleines Problem gestoßen: Ich habe ein JS Dropdown-Menü und wenn ich eine GoogleMap eingefügt habe ... wird das Menü hinter der Google Map gerendert ... Irgendwelche Ideen, wie man den Z-Index der Google Map chancenlos macht?Google Maps, Z Index und Drop Down Javascript Menüs
Danke!
Wenn Ihr Problem in Internet Explorer geschieht, aber es macht die Art und Weise Sie in FireFox oder Safari erwarten würden, this link war außerordentlich hilfreich für mich mit einem similar problem.
Es scheint auf die Idee, dass ein Element als "Position: relativ;" in CSS verursacht IE6 & 7 mit seinem Z-Index im Vergleich zu anderen Elementen, die vor ihm im HTML-Dokument kommen, auf nicht intuitive und Anti-Spec-Weisen. Angeblich verhält sich IE8 "richtig", aber ich habe es nicht selbst getestet.
Der Rat von Anutron wird sehr hilfreich sein, wenn Ihr Problem mit einem Formularelement <SELECT> ist, aber wenn Sie JavaScript verwenden, um divs oder uls wie ein Dropdown zu manipulieren, glaube ich nicht, dass es hilft.
Versuchen Sie, Ihren Menü-Z-Index wahnsinnig hoch zu setzen. Apparently Google Maps verwendet einen Bereich von -9000000 bis 9000000.
Die Menüs sind in einer Vorlage ... Ich bin mir nicht sicher, ob ich das kontrollieren kann. Deshalb habe ich nach einer Möglichkeit gefragt, den Google Map-Z-Index zu ändern. – ebarrera
Wickeln Sie die Karte in ein DIV, geben Sie diesem DIV einen Z-Index von 1. Wickeln Sie Ihr Dropdown in ein DIV und geben Sie ihm einen höheren Wert.
Beachten Sie, dass Dropdown-Menüs in einigen Browsern (ahem IE * ahem) überhaupt nicht zPositioniert werden können. Sie müssen ein "iframe shim" verwenden, um es zu verdecken oder das Dropdown vollständig zu verstecken, wenn Sie etwas darüber positionieren möchten. Siehe: http://clientside.cnet.com/wiki/cnet-libraries/02-browser/02-iframeshim
Die Karte ist bereits in einem div eingepackt. Geben Sie ihm einen negativen Z-Index und es funktioniert - mit einem Vorbehalt: die Gmaps-Steuerelemente sind nicht anklickbar.
Wenn Ihr Menü in einen Div-Container, z. #menuWrap dann weisen Sie ihm relative Position zu und geben Sie ihm einen hohen z-Index, z.
#menuWrap {
position: relative;
z-index: 9999999
}
Stellen Sie sicher, Ihre Karte in einem div ist
IE das Problem
jedes div gibt, die in einem relativ positioniert div gewickelt ist, wird eine neue Z-Index in IE starten. Die Art, wie IE die äußeren relativen divs interpretiert, ist in der Reihenfolge von html. Zuletzt definiert ist oben. Egal, was die Z-Indizes der divs innerhalb der relativ positionierten divs sind.
Lösung für IE: Definieren Sie das Div, das zuletzt in HTML sein sollte.
(So z-index funktioniert im IE, aber nur pro Halter div ist jeder Halter div unabhängig von anderen Haltern divs)
z-index (vor allem in Internet Explorer 7) wirklich nicht für mich arbeiten. Ich habe viele verschiedene Kombinationen von hohen und niedrigen Karten-Z-Indizes ausprobiert, hatte aber keine Freude.
Bei weitem die einfachste/schnellste Antwort war für mich auf meinen Aufschlag/CSS zu meinem Flyouts/Rollovers aufgelistet hat in dem Mark-up oben/vor meine Karte neu zu ordnen (wörtlich vor den <div id="map">) Auf diese Weise konnte ich die z-index Standard bleiben lassen() und zu wichtigeren Aspekten meiner webapp weitergehen;)
Hoffe, das hilft!
<ul id="rollover">
<li><a href="#here">There</a></li>
</ul>
<div id="map">...</div>
Keine Notwendigkeit, den Z-Index für die Karte und das Menü festzulegen. Wenn Sie den Z-Index des Menüs einfach höher als die Karte setzen, wird es nicht unbedingt funktionieren.
Legen Sie den Z-Index der Zuordnung div auf -1 fest. Jetzt wird das Menü heruntergeklappt und über der Karte angezeigt ......... aber wenn Sie einen Wrapper verwenden, ist die Karte nicht mehr interaktiv, da sie sich jetzt hinter dem Wrapper befindet.
Um dies zu umgehen, verwenden Sie onmouseover und onmouseout Funktionen in Ihrem Wrapper div. Stellen Sie sicher, dass diese in Ihrem Wrapper div sind und nicht in Ihrem Karten-div.
onmouseover="getElementById('map').style.zIndex = '10000';"
onmouseout="getElementById('map').style.zIndex = '-1';"
Ich habe ein Drop-down-Google-Stil und hatte das gleiche Problem ... das V3 api für Google Maps verwenden, können Sie nur ein Steuerelement erstellen und sie auf der Karte platzieren mit:
map.controls[google.map.ControlPosition.TOP].push(control);
Da es sich um eine Dropdown-Liste handelt, stellen Sie sicher, dass der Z-Index des enthaltenden Divs am höchsten ist (z = 3), dann ist der Dropdown-Teil mit den Menüeinträgen niedriger als das enthaltende div (z = 0).
Hier ist ein example.
Aus meiner Erfahrung ist die einzige Zeit, die Sie Shims verwenden müssen, für Plug-Ins (wie mit Google Earth).
Ich habe festgestellt, dass manchmal versehentliche Vernachlässigung zu erklären, die! Doctype wird diese Art von Schluckauf im IE verursachen, wenn andere Browser in der Lage scheinen, die Seite gut auszuhandeln.
Das ist ein sehr nützlicher Artikel, den Sie verlinkt haben. Vielen Dank! –