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

时间:2008-09-17 19:19:43

标签: javascript html css google-maps z-index

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

谢谢!

11 个答案:

答案 0 :(得分:8)

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

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

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

答案 1 :(得分:2)

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

答案 2 :(得分:2)

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

答案 3 :(得分:2)

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

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

确保您的地图位于div

答案 4 :(得分:1)

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

答案 5 :(得分:1)

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

答案 6 :(得分:1)

IE提出问题

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

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

(所以z-index在IE中工作,但只有每个持有者div,每个持有者div独立于其他持有者div)

答案 7 :(得分:0)

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>

答案 8 :(得分:0)

无需为地图和菜单设置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';"

答案 9 :(得分:0)

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

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

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

这是一个example

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

答案 10 :(得分:0)

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

相关问题