Google Maps, index Z et menus déroulants Javascript

Question

J'ai eu un petit problème aujourd'hui: j'ai un menu déroulant JS et quand j'ai inséré une GoogleMap ... le menu est affiché derrière la carte Google ... Toutes les idées sur la façon de risquer le z Index de la carte Google?

Merci!

Answer 1

Si votre problème survient dans Internet Explorer, mais donne le résultat escompté dans FireFox ou Safari, ce lien m'a été extrêmement utile avec problème similaire .

Cela semble se résumer à l'idée de marquer un élément comme " position: relative; " en CSS, IE6 & amp; 7 perturbe son index z par rapport aux autres éléments qui le précèdent dans le document HTML, de manière non intuitive et anti-spéc. Soi-disant IE8 se comporte & "Correctement &"; mais je ne l'ai pas testé moi-même.

Les conseils d'Anutron seront très utiles si votre problème concerne un élément de formulaire <SELECT>, mais si vous utilisez JavaScript pour manipuler des divs ou des uls afin qu'ils agissent comme un menu déroulant, je ne pense pas que cela va aider. .

Answer 2

Notez que les menus déroulants de certains navigateurs ( ahem IE * ahem) ne peuvent pas du tout être zPositionnés. Vous devrez utiliser un & "; Iframe shim &"; pour masquer ou masquer entièrement le menu déroulant si vous souhaitez placer quelque chose au-dessus de celui-ci. Voir: http://clientside.cnet.com/wiki/ cnet-libraries / 02-browser / 02-iframeshim

Answer 3

La carte est déjà intégrée dans un div. Donnez-lui un indice z négatif et cela fonctionne - avec une mise en garde: les contrôles gmaps ne sont pas cliquables.

Answer 4

Si votre menu est enveloppé dans un conteneur div, par exemple. #menuWrap assignez-lui ensuite la position relative et attribuez-lui un indice z élevé .... par exemple

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

Assurez-vous que votre carte est à l'intérieur d'une div

Answer 5

Essayez de régler votre z-index de menu incroyablement haut. Apparemment , Google Maps utilise une plage allant de -9000000 à 9000000.

Answer 6

Enveloppez la carte dans une DIV, attribuez à cette DIV un z-index égal à 1. Enroulez votre liste déroulante dans une DIV et donnez-lui une valeur plus élevée.

Answer 7

IE donne le problème

chaque div qui est encapsulé dans un div positionné relatif commencera un nouvel index z dans IE. La façon dont IE interprète les divs relatifs externes est dans l'ordre HTML. Dernière définition est sur le dessus. Quels que soient les index z des div à l’intérieur des div positionnés par rapport.

Solution pour IE: définissez le div qui devrait être enfin au top en HTML.

(Ainsi, z-index fonctionne dans IE, mais seulement par div div. titulaire, chaque div div est indépendant des autres div divulateurs.)

Answer 8

z-index (surtout dans Internet Explorer 7) ne m'a pas vraiment fonctionné. J'ai essayé de nombreuses combinaisons différentes d'indices z cartographiques élevés / faibles, mais je n'avais aucune joie.

La solution la plus simple et la plus rapide pour moi a été de réorganiser mes caches / annotations pour que mes flyouts / survols soient répertoriés dans la balise au-dessus / avant de ma carte (littéralement, avant le <div id="map">), je pourrais ainsi laisser le auto rester par défaut (<=>) et passer à des aspects plus importants de mon application Web;)

J'espère que ça aide!

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

Answer 9

J'ai créé un menu déroulant de style Google et le même problème ... en utilisant l'API V3 pour Google Maps, vous créez un contrôle et le placez sur la carte à l'aide de:

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

S'agissant d'une liste déroulante, assurez-vous simplement que l'index z du div qui le contient est le plus élevé (z = 3), la partie déroulante contenant les éléments de menu est inférieure au div qui le contient (z = 0). .

Voici un .

D'après mon expérience, vous ne devez utiliser des cales que pour les plug-ins (comme dans Google Earth).

Answer 10

Pas besoin de définir l'index z pour la carte et le menu. Si vous définissez simplement l'index z du menu plus haut que la carte, cela ne fonctionnera pas nécessairement.

Définissez l'index z de la carte div sur -1. Maintenant, le menu déroulant apparaîtra sur la carte ......... mais si vous utilisez un wrapper, la carte ne sera plus interactive car elle se trouve maintenant derrière le wrapper.

Pour contourner ce problème, utilisez les fonctions onmouseover et onmouseout dans votre div wrapper. Assurez-vous qu'ils sont dans votre div d'emballage et non dans votre div de carte.

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

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

Answer 11

J'ai constaté que parfois, négliger par inadvertance de déclarer le! doctype provoquait ce type de problème dans IE, alors que d'autres navigateurs semblent être en mesure de négocier la page correctement.