Question

http://madisonlane.businesscatalyst.com

我正试图让div＃sign-post位于div＃bottom之上。这适用于除IE6和IE之外的所有浏览器。 IE7。任何人都可以看到问题在这里吗？

IE6还在div＃bottom的顶部显示了额外的198px。

Answer 1

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

这就是z-index应该如何根据the spec：

工作

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

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

因此，z-index决定元素与其“堆叠父级”的其他子级相比如何放置（最近的祖先具有z-index集和position relative }，absolute或fixed），但与其他元素进行比较时无关紧要;它是堆叠父母的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 {9}，998等z-index。另一种方法：当弹出窗口或下拉菜单变得可见时，找到它所有相对定位的祖先，并给它们一个具有非常高的z-index的on-top类;当它再次变为不可见时，删除类。

Answer 2

同意验证者评论 - 验证通常有帮助。但是，如果它不是IE中z-index的几个指针：

1）你正在操纵z-index的元素应该处于同一水平，即。你应该设置#bottom和#body

的z-index

如果这不可行那么

2）IE有时不会正确应用z-index，除非你将它应用于position:relative。尝试将该属性应用于#bottom和#body（或#signpost）

告诉我这是怎么回事

达科

Answer 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>

Answer 4

欢迎，我用以下方法解决了问题：

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

Answer 5

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

Answer 6

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

在通过互联网进行多次搜索后，尝试每个人的建议，我最终使其工作的唯一方法是从两个图层中删除position:属性，并调整margin-top:属性，直到我得到满意的结果

有点哈希，但是它有效，直到IE 8排除所有当前的错误......

Answer 7

唯一可靠的解决方案是，将顶部元素放在代码中，然后用绝对定位推送其他内容。

e.g。 WordPress的：将导航放在页脚文件中，但仍在页面包装器中。

也可能为搜索引擎带来一些优势，因为它们可以直接从内容开始，而不是首先爬过菜单......

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

IE 6＆amp; IE 7 Z-Index问题

7 个答案: