IE 6 & IE 7 Z-Index 问题答案

【问题标题】：IE 6 & IE 7 Z-Index ProblemIE 6 & IE 7 Z-Index 问题
【发布时间】：2010-10-14 21:46:11
【问题描述】：

http://madisonlane.businesscatalyst.com

我试图让 div#sign-post 位于 div#bottom 上方。这适用于除 IE6 和 IE7 之外的所有浏览器。谁能看出这是什么问题？

IE6 还会在 div#bottom 的顶部额外显示 198px。

【问题讨论】：

讽刺的是它在 IE8 中运行良好

标签： css internet-explorer cross-browser

【解决方案1】：

这里的大部分答案都是错误的；有些工作，但不是因为他们所说的原因。这里有一些解释。

根据the spec，这就是 z-index 的工作方式：

你可以给任何元素一个z-index值；如果你不这样做，它默认为auto
定位的元素（即具有与默认static 不同的z-index 属性的元素）创建一个新的堆叠上下文。堆叠上下文是重叠的“单元”；一个堆叠上下文要么完全在另一个之上（即第一个的每个元素都在第二个的任何元素之上）或完全在它之下。
在相同的堆栈上下文中，比较元素的堆栈级别。具有显式z-index 值的元素将该值作为堆栈级别，其他元素从其父元素继承。堆栈级别较高的元素显示在顶部。当两个元素具有相同的堆栈级别时，通常在 DOM 树中较晚的那个被绘制在顶部。（如果它们具有不同的 position 属性，则适用更复杂的规则。）

换句话说，当两个元素设置了z-index 时，为了决定哪个会显示在顶部，您需要检查它们是否有任何定位的父元素也设置了z-index。如果他们不这样做，或者父母很常见，则 z-index 较高的一方获胜。如果是的话，你需要比较父母，孩子的z-index是无关紧要的。

因此，z-index 决定了元素与其“堆叠父级”的其他子级相比的放置方式（最接近的祖先具有z-index 集合和relative、absolute 或@987654338 的position @)，但与其他元素比较时没关系；重要的是堆叠父母的z-index（或者可能是堆叠父母的堆叠父母的z-index，等等）。在一个典型的文档中，您仅在几个元素（如下拉菜单和弹出窗口）上使用 z-index，其中不包含另一个，所有具有 z-index 的元素的堆叠父级是整个文档，您通常可以不要将z-index 视为全局的文档级排序。

与 IE6/7 的根本区别在于定位元素开始新的堆叠上下文，无论它们是否设置了z-index。由于您本能地分配 z-index 值的元素通常是绝对定位的，并且具有相对定位的父级或近亲，这意味着您的 z-index-ed 元素根本不会被比较，而是它们的定位祖先将 - 并且由于没有设置 z-index，文档顺序将占上风。

作为一种解决方法，您需要找出实际比较了哪些祖先，并为它们分配一些 z-index 以恢复您想要的顺序（通常是反向文档顺序）。通常这是由 javascript 完成的 - 对于下拉菜单，您可以遍历菜单容器或父菜单项，并为它们分配 1000、999、998 等的 z-index。另一种方法：当一个弹出或下拉菜单变得可见时，找到它所有相对定位的祖先，并给它们一个on-top类，它有一个非常高的z-index；当它再次变得不可见时，删除这些类。

【讨论】：

感谢您为我解开谜团！ :) 我在元素排序方面遇到过这个问题，每次我都觉得我在诉诸黑魔法来让它发挥作用。
这种方法（将z-index添加到相对父级）在什么情况下不起作用，还有其他解决方法吗？
@DEfusion：IE6还有一个垂直定位相关的bug；某些元素（例如 <select> 或 Flash）在文档之外，无法通过 z-index 将内容放置在它们上方。这通常可以通过在它们和弹出窗口之间放置一个 iframe 来解决。
谢谢！对于应该始终位于所有内容之上的下拉或弹出类型的小部件，使用 jQuery，这真的很容易修复。打开小部件时调用 $(myWidget).parents().addClass('on-top')，关闭时调用 $(myWidget).parents().removeClass('on-top')。
@RMorrisey 很好的解释，不知道这个。 jQuery sn-p 也为我工作。谢谢！

【解决方案2】：

同意验证者的评论 - 验证通常会有所帮助。但是，如果它没有在 IE 中为 z-index 提供一些指针：

1) 您正在操作的 z-index 元素应该在同一级别，即。你应该设置#bottom 和#body 的z-index

如果这不可行，那么

2) IE 有时不会正确应用 z-index，除非您将其应用到具有position:relative 的元素。尝试将该属性应用于#bottom 和#body（或#signpost）

让我知道结果如何

达科

【讨论】：

我相信这是由于通过在样式表中添加“position:relative”修复了众所周知的错误。
这种行为是因为 IE6/7 为每个具有 position:relative 的元素启动了一个新的堆叠顺序。 brenelz.com/blog/squish-the-internet-explorer-z-index-bug

【解决方案3】：

我刚刚遇到了这个问题，我找到的解决方法（感谢 Quirksmode）是为您尝试设置的节点的直接父节点设置它自己的 z-index 的 z-index，该 z-index 小于 z-您尝试设置的节点的索引。这是一个应该在 IE6 中工作的简单示例

<html>
  <head>
    <style type="text/css">
      #AlwaysOnTop {
        background-color: red;
        color: white;
        width: 300px;
        position: fixed;
        top: 0;
        z-index: 2;
      }
      #Header {
        color: white;
        width: 100%;
        text-align: center;
        z-index: 1;
      }
    </style>
  </head>
  <body>
    <div id="Header">
      <div id="AlwaysOnTop">This will always be on top</div>
    </div>
    <div id="Content">Some long amount of text to produce a scroll bar</div>
  </body>
</html>

【讨论】：

之所以有效，是因为它将#Header 放置在高于#Content（可能是定位元素）的位置。 #Header 和 #AlwaysOnTop 的 z-index 之间的关系无关紧要。详情见我的回答。

【解决方案4】：

欢迎，我解决了这个问题：

.header { 
    position: relative;
    z-index: 1001;
}
.content {
    position: relative;
    z-index: 1000;
}

【讨论】：

【解决方案5】：

在我看来，您的 HTML 格式不正确。我试着数了数，也许我忘记了开始和结束标签的数量，但看起来 div#container 没有关闭。尝试通过验证器（例如 W3C 的 HTML Validator 或其他东西）运行您的页面并修复一些错误。这在过去帮助我解决了这些问题。祝你好运！

【讨论】：

【解决方案6】：

我最近遇到了一个持续的问题，显示一层在另一层之上。在我的例子中，我以编程方式在 Javascript 中创建了两层，一层用于显示自定义控件，另一层用于在其后面创建全屏层。 FF 很好，但 IE 总是在其他所有内容之上显示全屏图层。

在互联网上进行了无数次拖网之后，尝试了每个人的建议，我最终得到它的唯一方法是从两个层中删除position: 属性，并调整margin-top: 属性直到我得到满意的结果。

有点杂乱无章，但它可以工作，直到 IE 8 整理出所有当前的错误......

【讨论】：

【解决方案7】：

唯一可靠的解决方案是，将顶部元素放在代码的下方，然后用绝对定位将它们推到其他东西上。

例如WordPress：将导航放在页脚文件中，但仍在页面包装器中。

或许也能为搜索引擎带来一些优势，因为它们可以直接从内容开始，无需先爬过菜单……

更新：我需要纠正自己。虽然将元素放在下面然后将其推过仍然是最简单的方法，但在某些情况下，这在合理的时间内是不可能的。然后你必须确保每个父元素都有某种定位和一些有意义的 z-index。那么即使在 IE7 中，z-index 也应该可以再次工作。

【讨论】：