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

谢谢！

解决方案

回答

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

回答

将地图包裹在DIV中，为该DIV赋予z索引1. 将下拉菜单包裹在DIV中，并为其赋予更高的值。

回答

请注意，某些浏览器(ahemIE * ahem)的下拉菜单根本无法定位。如果要在其上方放置某些内容，则需要使用" iframe填充程序"使其模糊或者完全隐藏下拉列表。请参阅：http://clientside.cnet.com/wiki/cnet-libraries/02-browser/02-iframeshim

回答

如果问题在Internet Explorer中发生，但可以按照我们在FireFox或者Safari中的显示方式呈现，则此链接对我遇到类似问题特别有用。

似乎可以归结为将元素标记为" position：relative;"的想法。 CSS中的CSS会导致IE6＆7相对于HTML文档中位于其之前的其他元素的z-index混乱，且采用不直观和反规范的方式。假设IE8的行为"正确"，但我自己尚未对其进行测试。

如果问题与<SELECT>表单元素有关，那么Anutron的建议将非常有帮助，但是如果我们使用JavaScript来操作div或者uls来充当下拉菜单，我认为这不会有所帮助。

回答

该地图已经包装在div中。给它一个负的z-index，它有一个警告：gmaps控件不可单击。

回答

如果菜单包装在div容器中，例如然后，#menuWrap为其分配相对位置，并为其赋予较高的z索引...。

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

确保地图在div内

回答

IE浏览器给的问题

包装在相对位置的div中的每个div都会在IE中开始一个新的z-index。 IE解释外部相对div的方式是html的顺序。最后定义在最上面。不管相对定位的div内的div的z索引是多少。

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

(因此z-index在IE中有效，但仅按每个div持有者而言，每个div持有者都独立于其他div持有者)