Question

我今天遇到了一个小问题：我有一个JS下拉菜单，当我插入一个GoogleMap时......菜单显示在谷歌地图后面...有关如何机会z指数的任何想法谷歌地图？

谢谢！

Answer 1

如果您的问题在Internet Explorer中发生，但它在FireFox或Safari中呈现的方式，this link对similar problem的用户非常有帮助。

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

如果你的问题是使用<SELECT>表单元素，Anutron的建议会非常有用，但是如果你使用JavaScript操作div或uls就像下拉一样，我认为它不会发生帮助。

Answer 2

请注意，某些浏览器（ ahem IE * ahem）中的下拉菜单根本无法进行zPosition。如果要在其上方放置某些东西，则需要使用“iframe垫片”来隐藏它或完全隐藏下拉列表。请参阅：http://clientside.cnet.com/wiki/cnet-libraries/02-browser/02-iframeshim

Answer 3

地图已经包含在div中。给它一个负的z-index并且它有效 - 有一点需要注意：gmaps控件不可点击。

Answer 4

如果您的菜单包含在div容器中，例如#menuWrap然后将其分配给相对位置并给它一个高z-index ....例如

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

确保您的地图位于div

内

Answer 5

尝试将菜单z-index设置得非常高。 Apparently Google地图的使用范围为-9000000至9000000。

Answer 6

将地图包裹在DIV中，为该DIV指定z-index为1.将您的下拉列表包裹在DIV中并为其提供更高的值。

Answer 7

IE提出问题

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

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

（所以z-index在IE中工作，但只有每个持有者div，每个持有者div独立于其他持有者div）

Answer 8

z-index（特别是在Internet Explorer 7中）真的不适合我。我尝试了许多不同组合的高与低地图z指数但没有快乐。

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

希望这有帮助！

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

Answer 9

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

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

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

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

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

Answer 10

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

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

由于它是一个下拉列表，只需确保包含div的z-index最高（z = 3），然后包含菜单项的下拉部分低于包含div（z = 0）

这是一个example。

根据我的经验，您需要使用填充程序的唯一时间是插件（例如Google Earth）。

Answer 11

我发现有时无意中忽略声明！doctype会在IE中造成这种打嗝，当其他浏览器似乎能够正常协商页面时。

谷歌地图，Z索引和下拉Javascript菜单

11 个答案: