Google Maps, o Índice Z e menus Drop Down Javascript
-
01-07-2019 - |
Pergunta
Já corri em um pequeno problema hoje: Eu tenho uma queda JS menu de baixo e quando eu inserido um GoogleMap ... O menu é processado por trás do Google mapa ... Todas as ideias sobre a forma de chance do Índice z de o Google Map?
Obrigado!
Solução
Se o seu problema acontece no Internet Explorer, mas torna a maneira que você esperaria no Firefox ou o Safari, este link foi extraordinariamente útil para mim com um semelhante problema .
Parece resumem-se à ideia de que marcando um elemento como "position: relative;" em CSS faz com IE6 e 7 a mexer com ele do z-index em relação a outros elementos que vêm antes no documento HTML, de forma unintuitive e anti-spec. Supostamente IE8 se comporta "corretamente", mas eu não testei isso sozinho.
O conselho de Anutron vai ser realmente útil se o seu problema é com um elemento de formulário <SELECT>
, mas se você estiver usando JavaScript para manipular divs ou ULS a agir como um drop down Eu não acho que isso vai ajudar.
Outras dicas
Observe que menus suspensos em alguns navegadores ( ahem IE * ahem) não pode ser zPositioned em tudo. Você precisará usar um "iframe calço" para obscurecer ou esconder a lista suspensa por completo, se você quiser posição algo acima dela. Veja: http://clientside.cnet.com/wiki/ CNET-bibliotecas / 02-browser / 02-iframeshim
O mapa já está acondicionada dentro de uma div. Dê-lhe um z-index negativo e ele funciona - com uma ressalva:. Os controles gmaps não são clicáveis ??
Se o seu menu é envolto em um recipiente div por exemplo #menuWrap
depois atribuir a posição relativa e dar-lhe um elevado índice z .... por exemplo.
#menuWrap {
position: relative;
z-index: 9999999
}
Verifique se o seu mapa está dentro de uma div
Tente configurar seu menu z-index insanamente alta. Aparentemente Google Maps utiliza uma variedade de -9000000 para 9000000.
Enrole o mapa em um DIV, dar esse DIV um z-index de 1. Enrole o seu drop-down em uma DIV e dar-lhe um valor maior.
IE dá o problema
cada div que é enrolado em uma div posicionado em relação vai começar um novo índice z em IE. A maneira como o IE interpreta os divs relativos exteriores, é em ordem de HTML. Última definido está no topo. Não importa qual os Z-índices dos divs dentro divs posicionados relativamente são.
Solução para IE:. Definir a div que deve estar no topo na última em html
(Então z-index funciona no IE, mas apenas por div titular, cada div titular é independente de outros divs titular)
z-index
(especialmente no Internet Explorer 7) realmente não funcionou para mim. Eu tentei muitos diferentes combinações de de alta vs. baixa mapa z-índices, mas não tinha alegria.
De longe, a resposta mais simples / mais rápido para mim foi re-organizar a minha mark-up / css para ter meus flyouts / sobreposições listados na mark-up acima / antes meu mapa (literalmente, antes do <div id="map">
), desta forma eu poderia deixar o z-index
permanecem padrão (auto
) e passar para aspectos mais importantes da minha webapp;)
Espero que isso ajude!
<ul id="rollover">
<li><a href="#here">There</a></li>
</ul>
<div id="map">...</div>
Eu criei um drop-down google estilo e tive o mesmo problema ... usando a API V3 para os mapas do Google, basta criar um controle e colocá-lo no mapa usando:
map.controls[google.map.ControlPosition.TOP].push(control);
Uma vez que é um drop-down, basta verificar se o z-index do div contendo é maior (z = 3), em seguida, o drop-down parte que contém os itens de menu é menor que o div contendo (z = 0) .
Aqui está um exemplo .
Da minha experiência, a única vez que você precisa usar calços é para plug-ins (como com o Google Earth).
Não há necessidade de definir o índice z tanto para o mapa e o menu. Se você simplesmente definir o z-index do menu superior do que o mapa, não necessariamente funcionará.
Conjunto o índice z do mapa div a -1. Agora o menu drop-down e exibição sobre o mapa ......... mas se você estiver usando um invólucro, em seguida, o mapa não será mais interativo como é agora atrás do wrapper.
Para contornar esse problema, uso onmouseover e onmouseout funções na sua div wrapper. Certifique-se esses são em sua div invólucro e não o seu mapa div.
onmouseover="getElementById('map').style.zIndex = '10000';"
onmouseout="getElementById('map').style.zIndex = '-1';"
Descobri que às vezes inadvertidamente deixar de declarar o doctype! Fará com que este tipo de soluço no IE, quando outros navegadores parecem ser capazes de negociar a multa página.