javascript - Google 地图、Z 索引和下拉 Javascript 菜单

Question

我今天遇到了一个小问题：我有一个 JS 下拉菜单，当我插入 GoogleMap 时...菜单在 Google Map 后面呈现...关于如何利用 Google Map 的 z 索引的任何想法?

谢谢！

score 8 · Accepted Answer

如果您的问题发生在 Internet Explorer 中，但它呈现的方式与您在 FireFox 或 Safari 中所期望的方式相同，那么此链接对于遇到类似问题的我来说非常有帮助。

它似乎归结为将元素标记为“位置：相对”的想法。在 CSS 中导致 IE6 和 7 以不直观和反规范的方式将其 z-index 与 HTML 文档中出现在它之前的其他元素相混淆。据说 IE8 的行为“正确”，但我自己没有测试过。

如果您的问题与表单元素有关，Anutron 的建议将非常有帮助<SELECT>，但如果您使用 JavaScript 来操作 div 或 uls 以像下拉菜单一样操作，我认为它不会有帮助。

score 2 · Accepted Answer

请注意，某些浏览器 ( ahem IE*ahem) 中的下拉菜单根本无法 zPositioned。如果你想在它上面放置一些东西，你需要使用“iframe shim”来隐藏它或完全隐藏下拉菜单。见：http ://clientside.cnet.com/wiki/cnet-libraries/02-browser/02-iframeshim

score 2 · Accepted Answer

地图已经包含在一个 div 中。给它一个负 z-index 并且它可以工作 - 有一个警告：gmaps 控件不可点击。

score 2 · Accepted Answer

如果您的菜单包含在 div 容器中，例如#menuWrap，则将其分配相对位置并赋予其高 z-index.... 例如

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

确保您的地图位于 div 内

score 1 · Accepted Answer

尝试将您的菜单 z-index 设置得非常高。显然，谷歌地图使用的范围是 -9000000 到 9000000。

score 1 · Accepted Answer

将地图包裹在 DIV 中，为该 DIV 指定 z-index 1。将下拉菜单包裹在 DIV 中并为其赋予更高的值。

score 1 · Accepted Answer

IE给出了问题

每个包含在相对定位 div 中的 div 都会在 IE 中启动一个新的 z-index。IE 解释外部相对 div 的方式是按 html 的顺序。最后定义的位于顶部。无论相对定位的 div 内的 div 的 z-index 是什么。

IE的解决方案：在html中定义最后应该在顶部的div。

（所以 z-index 在 IE 中确实有效，但仅适用于每个持有者 div，每个持有者 div 都独立于其他持有者 div）

score 0 · Accepted Answer

z-index（尤其是在 Internet Explorer 7 中）真的不适合我。我尝试了许多不同的高低地图 z 指数组合，但没有任何乐趣。

到目前为止，对我来说最简单/最快的答案是重新安排我的标记/css，以便在我的地图上方/之前的标记中列出我的弹出/翻转（字面意思是，在之前<div id="map">），这样我可以让z-index保持默认（auto）并继续我的 webapp 的更重要的方面；）

希望这可以帮助！

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

score 0 · Accepted Answer

无需为地图和菜单设置 z-index。如果您只是将菜单的 z-index 设置为高于地图，则不一定有效。

将地图 div 的 z-index 设置为 -1。现在菜单将下拉并显示在地图上......但是如果您使用的是包装器，那么地图将不再是交互式的，因为它现在位于包装器后面。

要解决此问题，请在包装 div 中使用 onmouseover 和 onmouseout 函数。确保它们在您的包装器 div 中，而不是在您的地图 div 中。

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

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

score 0 · Accepted Answer

我创建了一个谷歌风格的下拉菜单并遇到了同样的问题......使用谷歌地图的 V3 api，您只需创建一个控件并将其放置在地图上：

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

因为它是一个下拉菜单，所以只要确保包含的 div 的 z-index 最高（z=3）然后包含菜单项的下拉部分低于包含的 div（z=0）。

这是一个例子。

根据我的经验，您唯一需要使用 shims 的就是插件（例如使用 Google Earth）。

score 0 · Accepted Answer

我发现有时无意中忽略声明 !doctype 会在 IE 中导致这种打嗝，而其他浏览器似乎能够很好地协商页面。

11 回答 11