CSS IE 6 & IE 7 Z-Index 问题

IE 6 & IE 7 Z-Index Problem

提问by mattt

http://madisonlane.businesscatalyst.com

http://madisonlane.businesscatalyst.com

I'm trying to get the div#sign-post to sit above the div#bottom. This works fine in all browsers except IE6 & IE7. Can anyone see what the problem is here?

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

Also IE6 is displaying an additional 198px to the top of div#bottom.

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

采纳答案by Darko Z

Agree with validator comment - validating usually helps. But, if it doesn't heres a few pointers for z-index in IE:

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

1) elements who's z-index you're manipulating should be on the same level ie. you should be setting the z-index of #bottom and #body

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

if this is not feasible then

如果这不可行，那么

2) IE sometimes wont apply the z-index correctly unless the elements ou are applying it to have a position:relative. Try applying that property to #bottom and #body (or #signpost)

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

let me know how that works out

让我知道结果如何

Darko

达科

回答by Tgr

Most of the answers here are wrong; some work, but not for the reason they state. Here is some explanation.

这里的大多数答案都是错误的；一些工作，但不是因为他们陈述的原因。这里有一些解释。

This is how z-index should work according to the spec:

根据规范，z-index 应该是这样工作的：

• you can give a z-indexvalue to any element; if you don't, it defaults to auto
• positioned elements (that is, elements with a positionattribute different from the default static) with a z-indexdifferent from autocreate a new stacking context. Stacking contexts are the "units" of overlapping; one stacking context is either completely above the another (that is, every element of the first is above any element of the second) or completely below it.
• inside the same stacking context, the stack levelof the elements is compared. Elements with an explicit z-indexvalue have that value as a stack level, other elements inherit from their parents. The element with the higher stack level is displayed on top. When two elements have the same stack level, generally the one which is later in the DOM tree is painted on top. (More complicated rules apply if they have a different positionattribute.)

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

In other words, when two elements have z-indexset, in order to decide which will show on top, you need to check if they have any positioned parents which also have z-indexset. If they don't, or the parents are common, the one with the higher z-index wins. If they do, you need to compare the parents, and the z-indexof the children is irrelevant.

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

So the z-indexdecides how the element is placed compared to other children of its "stacking parent" (the closest ancestor with a z-indexset and a positionof relative, absoluteor fixed), but it doesn't matter when comparing to other elements; it is the stacking parent's z-index(or possibly the z-indexof the stacking parent's stacking parent, et cetera) which counts. In a typical document where you use z-indexonly on a few elements like dropdown menus and popups, none of which contains the other, the stacking parent of all the elements which have a z-indexis the whole document, and you can usually get away with thinking of the z-indexas a global, document-level ordering.

因此，z-index决定了元素与其“堆叠父级”的其他子元素（具有z-indexset 和 a positionof relative, absoluteor的最接近的祖先）相比如何放置fixed，但与其他元素相比并不重要；重要的是堆叠父级的z-index（或可能是z-index堆叠父级的堆叠父级的，等等）。在一个典型的文档中，你z-index只在一些元素上使用，比如下拉菜单和弹出窗口，其中没有一个包含另一个，所有元素的堆叠父元素z-index是整个文档，你通常可以摆脱思考z-index作为一个全局的、文档级的排序。

The fundamental difference with IE6/7 is that positioned elements start new stacking contexts, whether they have z-indexset or not. Since the elements which you would instinctively assign z-indexvalues to are typically absolutely positioned and have a relatively positioned parent or close ancestor, this will mean that your z-index-ed elements won't be compared at all, instead their positioned ancestors will - and since those have no z-index set, document order will prevail.

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

As a workaround, you need to find out which ancestors are actually compared, and assign some z-index to them to restore the order you want (which will usually be reverse document order). Usually this is done by javascript - for a dropdown menu, you can walk through the menu containers or parent menu items, and assign them a z-indexof 1000, 999, 998 and so on. Another method: when a popup or dropdown menu becomes visible, find all its relatively positioned ancestors, and give them an on-topclass which has a very high z-index; when it becomes invisible again, remove the classes.

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

回答by Jason Sperske

I just had this problem and the fix I found (thanks to Quirksmode) was to give the direct parent of the node you are trying to set a z-index of it's own z-index that is at less than the z-index of the node you are trying to set. Here is a quick example that should work in IE6

我刚刚遇到了这个问题，我找到的解决方法（感谢 Quirksmode）是给节点的直接父节点，您尝试设置它自己的 z-index 的 z-index，该 z-index 小于节点的 z-index您尝试设置的节点。这是一个应该在 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>

回答by remx

Welcome, I solved the problem with:

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

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

回答by Waschb?r

the only reliable solution is, to put the top elements below in the code and then push them overthe other stuff with absolute positioning.

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

e.g. Wordpress: put the navigation in the footer file, but still inside the page wrapper.

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

might also bring some advantages for search engines, because they can directly start with the content, without crawling through the menu first...

也可能给搜索引擎带来一些好处，因为他们可以直接从内容入手，不用先爬过菜单……

UPDATE: I need to correct myself. While putting the element below and then pushing it over is still the easiest way, there are certain cases when this is not possible in reasonable time. Then you have to make sure that each and every parent element has some kind of positioning and some senseful z-index. Then the z-index should work again even in IE7.

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

回答by Waschb?r

I've recently had an ongoing problem displaying one layer above another. In my case I was programmatically creating two layers in Javascript, one for diaplaying a custom control and one for creating a full screen layer behind it. FF was fine, bu IE displayed the full screen layer always on top of everything else.

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

After numerous trawls over the interweb, trying everyone's suggestions, the only way I eventually get it working was to remove position:attributes from both layers, and tweak the margin-top:attribute until I got a satisfactory result.

在网上搜索了无数次之后，尝试了每个人的建议，我最终让它工作的唯一方法是position:从两个图层中删除属性，然后调整margin-top:属性，直到得到满意的结果。

A bit of a hash, but it works and it'll be fine until IE 8 sorts out all of the current bugs......

有点散列，但它可以工作并且在 IE 8 解决所有当前错误之前会很好......

回答by Shalom Craimer

Looks to me like you have some malformed HTML in there. I tried counting, and perhaps I lost count of the opening and closing tags, but it looks like div#container isn't closed. Try running your page through a validator (such as W3C's HTML Validator, or something) and fixing some of the errors. That's helped me with these sorts of problems in the past. Good luck!

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