Google Maps, o Índice Z e menus Drop Down Javascript

Question

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!

Answer 1

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.

Answer 2

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

Answer 3

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 ??

Answer 4

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

Answer 5

Tente configurar seu menu z-index insanamente alta. Aparentemente Google Maps utiliza uma variedade de -9000000 para 9000000.

Answer 6

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.

Answer 7

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)

Answer 8

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>

Answer 9

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).

Answer 10

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';"

Answer 11

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.