J'ai un petit problème aujourd'hui: j'ai un menu déroulant JS et quand j'ai inséré un GoogleMap ... le menu est rendu derrière la carte Google ... Des idées sur la façon de risquer l'index z de la carte Google?Google Maps, Z Index et menus déroulants Javascript
Merci!
Si votre problème se produit dans Internet Explorer, mais il rend la façon dont vous vous attendez à FireFox ou Safari, this link était extrêmement utile pour moi avec un similar problem.
Il semble se résumer à l'idée que marquer un élément comme "position: relative;" dans CSS provoque IE6 & 7 à son z-index par rapport à d'autres éléments qui le précèdent dans le document HTML, de manière non intuitive et anti-spécification. Soi-disant IE8 se comporte "correctement" mais je ne l'ai pas testé moi-même.
Le conseil d'Anutron va être très utile si votre problème est avec un élément de formulaire <SELECT>, mais si vous utilisez JavaScript pour manipuler des divs ou uls pour agir comme une liste déroulante, je ne pense pas que ça va aider.
Essayez de définir votre menu z-index incroyablement élevé. Apparently Google Maps utilise une plage de -9000000 à 9000000.
Les menus sont construits dans un modèle ... Je ne suis pas sûr que je peux contrôler cela. C'est pourquoi je demandais un moyen de changer l'index z de Google Map – ebarrera
Enveloppez la carte dans un DIV, attribuez à cette DIV un z-index de 1. Enveloppez votre liste déroulante dans un DIV et donnez-lui une valeur plus élevée.
Notez que les menus déroulants dans certains navigateurs (ahem IE * ahem) ne peuvent pas être zPositionés du tout. Vous aurez besoin d'utiliser un "iframe shim" pour l'obscurcir ou cacher complètement la liste déroulante si vous voulez positionner quelque chose au-dessus. Voir: http://clientside.cnet.com/wiki/cnet-libraries/02-browser/02-iframeshim
La carte est déjà emballée dans un div. Donnez-lui un z-index négatif et cela fonctionne - avec une mise en garde: les contrôles gmaps ne sont pas cliquables.
Si votre menu est enveloppé dans un conteneur div par ex. #menuWrap puis lui affecter la position relative et lui donner un indice z élevé .... par ex.
#menuWrap {
position: relative;
z-index: 9999999
}
Assurez-vous que votre carte est dans un div
IE donne le problème
chaque div qui est enveloppé dans un div positionné par rapport commencera un nouveau z-index dans IE. La façon dont IE interprète les divs relatifs externes, est dans l'ordre du html. La dernière définition est en haut. Peu importe ce que sont les z-index des divs à l'intérieur des divs positionnés.
Solution pour IE: définir la div qui devrait être au sommet en dernier en html.
(donc z-index fonctionne dans IE, mais seulement par div titulaire, chaque div titulaire est indépendant des autres divs titulaire)
z-index (en particulier dans Internet Explorer 7) vraiment ne fonctionne pas pour moi. J'ai essayé de nombreuses combinaisons différentes d'indices z de cartes hautes et basses mais je n'avais aucune joie.
De loin le plus simple/réponse la plus rapide pour moi était de réarranger ma marge/css d'avoir mes flyouts/renversements répertoriés dans la marge ci-dessus/avant ma carte (littéralement, avant la <div id="map">) , de cette façon je pourrais laisser le z-index rester par défaut (auto) et passer à des aspects plus importants de ma webapp;)
Espérons que cela aide!
<ul id="rollover">
<li><a href="#here">There</a></li>
</ul>
<div id="map">...</div>
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 le z-index de la carte div à -1. Maintenant, le menu déroulera et affichera sur la carte ......... mais si vous utilisez un wrapper alors la carte ne sera plus interactive car elle est maintenant derrière le wrapper.
Pour contourner ce problème, utilisez onmouseover et onmouseout fonctions dans votre div wrapper. Assurez-vous que ceux-ci sont dans votre div wrapper et non votre carte div.
onmouseover="getElementById('map').style.zIndex = '10000';"
onmouseout="getElementById('map').style.zIndex = '-1';"
Je créé un menu déroulant de style Google et a eu le même problème ... en utilisant la V3 api pour google maps, vous créez juste un contrôle et placez-le sur la carte en utilisant:
map.controls[google.map.ControlPosition.TOP].push(control);
Puisqu'il s'agit d'une liste déroulante, assurez-vous simplement que l'index z de la div contenant est le plus haut (z = 3) alors la partie déroulante contenant les éléments de menu est inférieure à la div contenant (z = 0).
Voici un example.
D'après mon expérience, la seule fois où vous avez besoin d'utiliser des cales est pour les plug-ins (comme avec Google Earth).
J'ai trouvé que, parfois, par inadvertance, en négligeant de déclarer le doctype! Fera ce genre de hoquet dans IE, alors que d'autres navigateurs semblent être en mesure de négocier l'amende page.
C'est un article très utile que vous avez lié. Merci! –