5

我正在开发一个带有地图的应用程序，角落里有一个 div，里面有一些东西。您可以单击此地图以在一个小窗口中显示一些信息。在某些情况下，窗口被角落的 div 覆盖。

我想要相反的效果（窗口覆盖 div）。我认为这只是一个 z-index 问题，但我无法让它工作。这是 IE7 的情况，从阅读的角度来看，z-index 似乎不起作用，除非它位于定位的元素内部。

这些元素似乎定位正确以使 z-index 正常工作，但我运气不佳。我已经尝试通过 Firebug 添加样式，但没有任何运气可以改变任何东西。窗口实际上只是两个 div，一个是绝对定位的，一个是相对的。

z-index 是唯一可能是这里的问题还是我不​​知道的其他东西？

有没有其他方法可以达到我想要的效果？我不能简单地通过 jquery 或其他方式隐藏 div，因为它的一部分应该从地图上打开的窗口后面可见。

4

6 回答 6

8

您遇到了堆叠上下文错误

http://therealcrisp.xs4all.nl/meuk/IE-zindexbug.html

IE 中每个定位的 div 都会创建一个新的堆叠上下文，并防止 z-index 不同的堆叠上下文出现在其他堆叠上下文之上。

解决方案是让您想要的窗口在树的顶部（例如进入正文），并且 z-index 值大于覆盖窗口的其他 div 的所有父级的 z-index。

在这里了解问题的广泛信息： http ://richa.avasthi.name/blogs/tepumpkin/2008/01/11/ie7-lessons-learned/

于 2009-03-26T22:51:50.037 回答
1

定位和负边距是我所知道的让元素重叠的唯一方法。z-index 仅用于明确告诉浏览器如何对元素进行分层。

至于您的问题，IE 需要容器元素和/或您重叠的元素position:relative;或position:absolute;z-index 才能正常工作。当有人说定位时，他们通常暗示position在 CSS 中设置属性。此外，在使用 z-index 时，请确保重叠的 elementa 彼此处于同一级别。

希望这可以帮助

于 2009-03-26T22:52:59.753 回答
1

很简单，HTML 文件中元素的顺序将决定堆叠顺序。如果您希望一个元素高于另一个元素，请确保它在 HTML 中稍后出现。

您只能交换所有在同一包含元素中的元素的堆叠顺序。例如，如果您有两个 div 并且它们都包含 3 个图像，则您不能使第二个 div 中的图像低于第一个 div 中的图像。

如果您需要复杂的堆叠顺序，则需要提前计划您的 HTML。

于 2009-03-27T00:11:25.633 回答
0

正如其他答案所暗示的那样，position:relative并position:absolute在 IE 中重置“堆叠上下文”。

于 2009-03-26T22:57:45.467 回答
0

如果您想要一个更懒惰的答案，您可以使用 javascript 并在单击地图时隐藏 div，并在关闭地图时显示它。

无论如何，您都必须对页面上的任何选择执行此操作，因为它们不适用于 z-index。

于 2009-03-26T23:06:48.473 回答
0

几天前我遇到了同样的问题，发现 Darko Z 建议的负边距效果很好。（我的代表还不够好，无法投票给达科）

我写了一篇关于它的快速帖子。

http://www.swards.net/2009/03/layering-html-elements-without-using.html

于 2009-03-26T23:25:36.073 回答