Hoy me he encontrado con un pequeño problema: tengo un menú desplegable JS y cuando inserté un mapa de Google ... el menú se representa detrás del mapa de Google ... ¿Alguna idea sobre cómo azar el índice Z de Google Map?Google Maps, índice Z y menú desplegable de Javascript
Gracias!
Si el problema ocurre en Internet Explorer, pero hace que la forma en que cabría esperar en Firefox o Safari, this link era extraordinariamente útil para mí con un similar problem.
Parece que se reduce a la idea de marcar un elemento como "posición: relativa"; en CSS causa IE6 & 7 para mezclarlo con su índice z relativo a otros elementos que vienen antes en el documento HTML, de maneras intuitivas y anti-especificación. Supuestamente IE8 se comporta "correctamente", pero yo no lo he probado.
El consejo de Anutron será realmente útil si su problema es con un elemento de formulario <SELECT>, pero si está usando JavaScript para manipular divs o uls para actuar como un menú desplegable, no creo que vaya a ayudar.
Intente configurar su menú z-index increíblemente alto. Apparently Google Maps usa un rango de -9000000 a 9000000.
Los menús están construidos en una plantilla ... No estoy seguro de poder controlar eso. Es por eso que estaba pidiendo una forma de cambiar el z-Index de Google Map – ebarrera
Ajusta el mapa en un DIV, dale a ese DIV un índice z de 1. Ajusta tu menú desplegable en un DIV y dale un valor más alto.
Tenga en cuenta que los menús desplegables en algunos navegadores (ahem IE * ejem) no se pueden zPositioned en absoluto. Tendrá que utilizar una "cuña iframe" para ocultarlo u ocultar el menú desplegable por completo si desea colocar algo encima de él. Ver: http://clientside.cnet.com/wiki/cnet-libraries/02-browser/02-iframeshim
El mapa ya está envuelto dentro de un div. Dale un índice z negativo y funciona, con una advertencia: los controles gmaps no se pueden hacer clic.
Si su menú está envuelto en un contenedor div, p. #menuWrap luego asignen una posición relativa y le den un alto índice Z ... p. Ej.
#menuWrap {
position: relative;
z-index: 9999999
}
Asegúrese de que el mapa es dentro de un div
IE da el problema
cada div que se envuelve en una relación posicionado div comenzará un nuevo índice z en el IE. La forma en que IE interpreta los divs externos relativos está en orden de html. Última definición está en la parte superior. No importa cuáles sean los índices z de los divs dentro de los divs posicionados relativos.
Solución para IE: defina el div que debería estar finalmente en html.
(z-index Así funciona en IE, pero sólo por div titular, todos los div titular es independiente de otros divs titular)
z-index (especialmente en Internet Explorer 7) realmente no funciona para mí. Probé muchas combinaciones diferentes de índices Z altos y bajos, pero no tuve alegría.
Con mucho, el/respuesta más rápida simple para mí fue la de volver a organizar mi margen de beneficio/css tener mis flyouts/vuelcos enumeran en el margen de arriba/antes de mi mapa (literalmente, antes de la <div id="map">) , de esta manera podría dejar que z-index permanezca predeterminado (auto) y pasar a aspectos más importantes de mi aplicación web;)
Espero que esto ayude!
<ul id="rollover">
<li><a href="#here">There</a></li>
</ul>
<div id="map">...</div>
No hay necesidad de ajustar el índice z tanto para el mapa y el menú. Si simplemente configura el índice Z del menú más alto que el mapa, no necesariamente funcionará.
Establezca el índice z del div del mapa en -1. Ahora el menú se desplegará y se mostrará sobre el mapa ......... pero si está usando un contenedor, entonces el mapa ya no será interactivo ya que ahora está detrás del contenedor.
Para solucionar esto, use las funciones onmouseover y onmouseout en su div wrapper. Asegúrate de que estén en tu envoltorio Div y no en tu mapa div.
onmouseover="getElementById('map').style.zIndex = '10000';"
onmouseout="getElementById('map').style.zIndex = '-1';"
he creado un desplegable Google estilo y tenía el mismo problema ... el uso de la versión 3 del API de Google Maps, que acaba de crear un control y colocarlo en el mapa usando:
map.controls[google.map.ControlPosition.TOP].push(control);
Como es un menú desplegable, solo asegúrese de que el índice z del div que contiene sea el más alto (z = 3), luego la parte desplegable que contiene los elementos del menú es menor que el div que contiene (z = 0).
Aquí hay un example.
Según mi experiencia, la única vez que necesita usar cuñas es para complementos (como con Google Earth).
He descubierto que, a veces, omitiendo inadvertidamente declarar el! Doctype causará este tipo de contratiempo en IE, cuando otros navegadores parecen ser capaces de negociar bien la página.
. Es un artículo muy útil que usted ha vinculado. ¡Gracias! –