使用Google Map和Navigation Sub-Menus，z-index在IE7中没有任何效果

Question

我觉得这个问题非常明显。我正在研究客户网站的问题，这实际上发生在我的几个客户的网站上，但这一点最明显。 IE7拒绝服从z-index规则。我玩过不同的值，尤其是div #mapWrapper和#map。看看这里：http://thepaysongroup.com/wp-content/plugins/hq_idx/searchlistings.php

我已经完成了数十次网络搜索，但找不到任何可以解决此问题的内容。我还准备通过AleksandarVacić关于IE6 / 7 z-index差异的文章，但仍然没有。任何帮助都会非常感激，我会在这个上撕下我的头发。

Answer 1

根据我的经验，z-index在IE中不稳定。将其设置为0尤其是个问题，因此请确保0不是您的z-index值之一。

有时最简单的解决方案是更改html的源顺序：在源代码中稍后显示的内容将位于顶部。你的情况有可能吗？

Answer 2

如果我没记错的话，你不能拥有两个具有相同z-index的元素，或者事情变得时髦。我注意到你的很多路径都有z-index为1000.有些想法可以尝试：

1. 将z-indexes重置为 faux 层中的增量。也就是说，如果您希望所有边界笔划位于同一“图层”上，请为该图层分配1001和2000之间的数字。上面的下一层将使用2001年和3000年之间的数字等。

2. 让文档流将z-indexes设置在几个容器中，并将容器本身设置为分开的z索引。

3. 请注意，历史上使用IE，组合框下拉列表和ActiveX控件等元素会显示在实际页面上方的图层上，因此无论您尝试设置多高，都始终显示在任何HTML上方z指数。不是说这是问题，但也许使用map api触发了这个问题。阅读更多here。

Answer 3

好的，我明白了。所以主导航在div #header中，其位置为：relative，没有定义z-index。一旦我在标题上放置了z-index，菜单就会在地图前面弹出。

我想这里的教训是寻找具有定义位置的每个元素，无论是绝对的还是相对的，以及它如何与相关元素进行交互。