Google Maps, Z Index e menu Javascript a discesa

Question

Ho riscontrato un piccolo problema oggi:Ho un menu a discesa JS e quando ho inserito una GoogleMap...il menu è visualizzato dietro la mappa di Google...Qualche idea su come modificare l'indice z di Google Map?

Grazie!

Answer 1

Se il problema si verifica in Internet Explorer, ma il rendering viene visualizzato come ti aspetteresti in FireFox o Safari, questo link è stato straordinariamente utile per me con a problema simile.

Sembra ridere all'idea che contrassegnare un elemento come "posizione: parente;" In CSS fa sì che IE6 e 7 confondano con il suo indice Z rispetto ad altri elementi che lo precedono nel documento HTML, in modi non intuitivi e anti-Spec.Presumibilmente IE8 si comporta "correttamente" ma non l'ho testato personalmente.

Il consiglio di Anutron sarà davvero utile se il tuo problema riguarda a <SELECT> form, ma se stai utilizzando JavaScript per manipolare div o ul in modo che agiscano come un menu a discesa, non penso che sarà d'aiuto.

Answer 2

Tieni presente che i menu a discesa in alcuni browser (ehmIE*ahem) non può essere affatto zPositioned.Dovrai utilizzare uno "shim iframe" per oscurarlo o nascondere completamente il menu a discesa se desideri posizionare qualcosa sopra di esso.Vedere: http://clientside.cnet.com/wiki/cnet-libraries/02-browser/02-iframeshim

Answer 3

La mappa è già racchiusa in un div.Dategli uno z-index negativo e funzionerà, con un avvertimento:i controlli di gmaps non sono cliccabili.

Answer 4

Se il tuo menu è racchiuso in un contenitore div, ad es. #menuWrap quindi assegnagli la posizione relativa e assegnagli un indice z alto....per esempio.

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

Assicurati che la tua mappa sia all'interno di un div

Answer 5

Prova a impostare lo z-index del menu a un livello follemente alto. Apparentemente Google Maps utilizza un intervallo compreso tra -9000000 e 9000000.

Answer 6

Avvolgi la mappa in un DIV, assegna a quel DIV uno z-index pari a 1.Avvolgi il tuo menu a discesa in un DIV e assegnagli un valore più alto.

Answer 7

IE dà il problema

ogni div racchiuso in un div posizionato relativo inizierà un nuovo z-index in IE.Il modo in cui IE interpreta i div relativi esterni è in ordine html.L'ultimo definito è in alto.Non importa quali siano gli z-index dei div all'interno dei div posizionati relativi.

Soluzione per IE:definisci il div che dovrebbe essere finalmente in primo piano in html.

(Quindi z-index funziona in IE, ma solo per div titolare, ogni div titolare è indipendente dagli altri div titolare)

Answer 8

z-index (specialmente in Internet Explorer 7) non ha funzionato davvero per me.Ho provato molte diverse combinazioni di alto vs.indici z della mappa bassi ma non ho avuto gioia.

Di gran lunga la risposta più semplice/rapida per me è stata riorganizzare il mio markup/css per avere i miei flyout/rollover elencati nel markup sopra/prima la mia mappa (letteralmente, prima del <div id="map">), in questo modo ho potuto lasciare che il z-index rimangono predefiniti (auto) e passiamo agli aspetti più importanti della mia webapp ;)

Spero che questo ti aiuti!

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

Answer 9

Ho creato un menu a discesa in stile Google e ho riscontrato lo stesso problema... utilizzando l'API V3 per Google Maps, devi solo creare un controllo e posizionarlo sulla mappa utilizzando:

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

Poiché si tratta di un menu a discesa, assicurati solo che l'indice z del div che lo contiene sia più alto (z=3), quindi la parte a discesa contenente le voci del menu è inferiore al div che lo contiene (z=0).

Ecco un esempio.

Dalla mia esperienza, l'unica volta in cui è necessario utilizzare gli spessori è per i plug-in (come con Google Earth).

Answer 10

Non è necessario impostare lo z-index sia per la mappa che per il menu.Se imposti semplicemente lo z-index del menu più in alto rispetto alla mappa, non funzionerà necessariamente.

Imposta lo z-index del div della mappa su -1.Ora il menu apparirà e verrà visualizzato sopra la mappa... ma se stai utilizzando un wrapper, la mappa non sarà più interattiva poiché ora si trova dietro il wrapper.

Per risolvere questo problema, utilizza le funzioni onmouseover e onmouseout nel div wrapper.Assicurati che siano nel div wrapper e non nel div della mappa.

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

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

Answer 11

Ho scoperto che a volte trascurare inavvertitamente di dichiarare il !doctype causerà questo tipo di intoppo in IE, quando altri browser sembrano essere in grado di negoziare bene la pagina.