Google Maps, Z-Index und Drop-Down-Menüs Javascript

StackOverflow https://stackoverflow.com/questions/86604

Frage

Ich habe heute auf einem kleines Problem führen: Ich habe ein JS Drop-Down-Menü, und wenn ich eine GoogleMap eingefügt ... das Menü hinter dem Google Map gemacht ... Irgendwelche Ideen, wie der z-Index Chance die Google Map?

Danke!

War es hilfreich?

Lösung

Wenn Ihr Problem tritt in Internet Explorer, aber es macht die Art und Weise Sie in FireFox oder Safari erwarten würde, Link war außerordentlich hilfreich für mich mit einem ähnliches Problem .

Es scheint, bis auf die Idee zu kochen, dass ein Element als Markierung „position: relative;“ in CSS verursacht IE6 & 7 mess with es z-Index relativ zu anderen Elementen ist, die, bevor sie in das HTML-Dokument kommen, in unintuitive und anti-spec Wege. Angeblich soll IE8 verhält sich „richtig“, aber ich habe es selbst nicht getestet.

Anutron Rat wird sehr hilfreich sein, wenn Ihr Problem mit einem <SELECT> Formelement ist, aber wenn Sie mit JavaScript divs oder uls zu manipulieren, wie ein Tropfen zu handeln nach unten Ich glaube nicht, es zu helfen, geht.

Andere Tipps

Beachten Sie, dass Drop-Down-Menüs in einigen Browsern ( ahem IE * ähem) können nicht alle zPositioned werden. Sie müssen eine „iframe Scheibe“ verwenden, um es zu verschleiern oder die Drop-down ganz verbergen, wenn Sie etwas darüber positionieren wollen. Siehe: http://clientside.cnet.com/wiki/ CNET-Bibliotheken / 02-Browser / 02-iframeshim

Die Karte ist bereits in einem div gewickelt. Geben Sie ihm einen negativen z-index und es funktioniert - mit einer Einschränkung:. Die gmaps Kontrollen sind nicht anklickbar

Wenn Sie Ihr Menü in einem div Behälter gewickelt z.B. #menuWrap dann weisen sie Position relativ und gibt ihm einen hohen z-Index .... z. 

#menuWrap {
  position: relative;
  z-index: 9999999
}

Stellen Sie sicher, Ihre Karte in einem div ist

Versuchen Sie Ihr Menü z-index irrsinnig hohe Einstellung. Anscheinend Google Maps eine Reihe von -9.000.000 bis 9.000.000 verwendet.

die Karte in einem DIV-Wrap, gibt, dass DIV einen Z-Index von 1. Ihre Drop-down in einem DIV-Wrap und ihm einen höheren Wert geben.

IE gibt, das Problem

jedes div, die in einer relativ positionierte div gewickelt ist, wird einen neuen Z-Index in IE starten. Die Weise, dh die äußeren relative divs auslegt ist, um von HTML. Zuletzt ist definiert an der Spitze. Egal, was der z-Indizes des divs innerhalb der relativ positionierter divs ist.

Lösung für IE:. Definieren die div, die oben zuletzt in html sein sollte

(also z-index in IE funktioniert, aber nur pro Halter div, jeder Halter div ist unabhängig von anderen Haltern divs)

z-index (vor allem in Internet Explorer 7) funktioniert wirklich nicht für mich. Ich habe versucht, viele verschiedene Kombination von hohen vs. niedrigen Karte z-Indizes hatte aber keine Freude.

Bei weitem die einfachste / schnellste Antwort war für mich auf meinen Mark-up / css neu zu ordnen, um meine Flyouts / Rollovers aufgeführt in dem Mark-up oben / vor meiner Karte zu haben (wörtlich: vor dem <div id="map">), auf diese Weise ich die z-index bleiben Standard lassen konnte (auto) und bewegen sich auf wichtigere Aspekte meiner Webapp;)

Hope, das hilft! 

<ul id="rollover">
<li><a href="#here">There</a></li>
</ul>
<div id="map">...</div>

habe ich einen Google-Stil Drop-down und hatte das gleiche Problem ... das V3 api für Google Maps verwenden, können Sie nur ein Steuerelement erstellen und legen Sie es auf der Karte mit: 

map.controls[google.map.ControlPosition.TOP].push(control);

Da es sich um ein Drop-down, so stellen Sie sicher, dass der Z-Index des umschließenden div ist am höchsten (z = 3) dann in der Dropdown-Teil die Menüpunkte enthält, ist niedriger als die enthaltende div (z = 0) .

Hier ist ein Beispiel .

Aus meiner Erfahrung ist die einzige Zeit, die Sie benötigen Unterlegscheiben zu verwenden ist für Plug-In (wie bei Google Earth).

Keine Notwendigkeit, den z-index für einzustellen sowohl die Karte und das Menü. Wenn Sie einfach den Z-Index des Menüs höher als die Karte gesetzt ist, wird es nicht unbedingt funktionieren.

Stellen Sie den Z-Index der Karte div auf -1. Nun wird das Dropdown-Menü und die Karte angezeigt wird über ......... aber wenn Sie einen Wrapper verwenden dann die Karte nicht mehr interaktiv sein, wie es jetzt hinter der Hülle ist.

Um dies zu umgehen, verwenden Sie Onmouseover und onmouseout Funktionen in Ihrem Wrapper div. Stellen Sie sicher, die sind in Ihrem Wrapper div und nicht Ihre Karte div. 

onmouseover="getElementById('map').style.zIndex = '10000';" 

onmouseout="getElementById('map').style.zIndex = '-1';"

Ich habe festgestellt, dass manchmal versehentlich das! Doctype zu erklären, zu vernachlässigen verursacht diese Art von Schluckauf in IE, wenn andere Browser die Seite in Ordnung zu sein scheinen in der Lage zu verhandeln.

Lizenziert unter: CC-BY-SA mit Zuschreibung
Nicht verbunden mit StackOverflow
scroll top