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中文网其他相关文章!