如何解决 Internet Explorer 6 和 7 中 Div 的 Z 索引问题？

Internet Explorer 6 和 7 Z-Index 问题

问题：

在网站上http://madisonlane.businesscatalyst.com，出现了一个问题，即 div#sign-post 无法与 div#bottom 重叠，即使它应该显示在其上方。另外，IE6 中 div#bottom 的顶部会多出 198px。

理解 Z-Index 和 Stacking Contexts

z-index 属性决定分层HTML 中的元素。然而，在 IE6 和 IE7 中，标准行为略有不同。

根据规范，具有非默认位置属性的元素会创建一个新的“堆叠上下文”。相同堆叠上下文中的元素根据其 z-index 值进行比较，具有较高值的​​元素出现在顶部。

在给定网站的情况下，出现问题是因为 IE6 和 IE7 创建堆叠div#sign-post 和 div#bottom 的上下文，即使它们缺乏明确的 z-index 值。因此，文档顺序会覆盖所需的 z-index 顺序。

解决方案：

要解决此问题，需要创建一个充当父元素的父元素div#sign-post 和 div#bottom 的“堆叠父级”。该元素应该具有非默认位置属性（例如，相对或绝对）和显式 z-index 值。

通过这样做，您可以确保 div#sign-post 和 div#bottom 的顺序在相同的堆叠上下文中确定，并建立所需的 z-index 优先级。

以上是如何解决 Internet Explorer 6 和 7 中 Div 的 Z 索引问题？的详细内容。更多信息请关注PHP中文网其他相关文章！