IE 6和IE 7的Z指数问题
http://madisonlane.businesscatalyst.com
我试图让div＃的签署职位上面的div＃底部。 除IE6和IE7以外的所有浏览器都能正常工作。 任何人都可以看到这里的问题是什么？
此外IE6显示额外的198px到div＃底部的顶部。
同意validation器的评论 – validation通常有帮助。 但是，如果它不在IE中z-index的几个指针：
1）你正在操纵的z-index元素应该在同一个层次，即。 你应该设置#bottom和#body的z-index
如果这不可行的话
2）IE浏览器有时不会正确应用z-index，除非元素ou正在使用它的position:relative 。 尝试将该属性应用于#bottom和#body（或#signpost）
让我知道这是如何工作的
达科
这里的大部分答案都是错误的。 一些工作，但不是因为他们的原因。 这是一些解释。
这就是z-index应该如何工作的规范 ：
- 你可以给任何元素一个
z-index值; 如果你不这样做，它默认为auto - 定位的元素（即
position属性不同于默认static元素）和z-index不同于auto创build新的堆栈上下文 。 堆叠上下文是重叠的“单位” 一个堆栈上下文要么完全在另一个上面（也就是说，第一个元素在第二个元素之上），或者完全在第二个元素之下。 - 在相同的堆栈上下文中，比较元素的堆栈级别 。 具有显式
z-index值的元素将该值作为堆栈级别，其他元素从父级inheritance。 具有较高堆栈级别的元素显示在顶部。 当两个元素具有相同的堆栈级别时，通常将DOM树中稍后的元素绘制在顶层。 （更复杂的规则适用于具有不同position属性的情况。）
换句话说，当两个元素具有z-index集合时，为了决定哪个元素在顶部显示，您需要检查是否有任何定位的父母也有z-index集合。 如果他们不这样做，或父母是共同的，那么z-索引较高的那个会赢。 如果他们这样做，则需要比较父母，而孩子的z-index是不相关的。
所以z-index决定元素的放置方式与其“堆叠父母”的其他孩子（与z-index集最近的祖先以及relative ， absolute或fixed position的最近祖先）相比如何放置，但比较时不重要到其他元素; 它是堆叠父亲的z-index （或者可能是堆叠父亲的堆叠父亲的z-index等）。 在一个典型的文档中，只使用下拉菜单和popup窗口等几个元素的z-index ，其中没有一个包含另一个元素，所有具有z-index的元素的堆栈父项是整个文档，通常可以放弃将z-index作为全球文档级别的sorting。
与IE6 / 7的根本区别在于定位元素开始新的堆栈上下文，无论他们是否设置了z-index 。 由于你本能地分配z-index值的元素通常是绝对定位的，并且具有相对定位的父亲或亲密祖先，这将意味着你的z-index -ed元素根本不会被比较，而是被定位的祖先将会 – 因为那些没有z-索引集合，文件顺序将占上风。
作为一种解决方法，您需要找出哪些祖先实际进行了比较，并为其分配一些z-index来恢复您想要的顺序（通常是反向文档顺序）。 通常这是通过javascript完成的 – 对于下拉菜单，您可以遍历菜单容器或父菜单项，并为它们分配一个z-index 。 另一种方法是：当一个popup菜单或下拉菜单变得可见时，find所有相对定位的祖先，并给它们一个具有非常高z-索引on-top类; 当它再次变得不可见时，移除这些类。
我刚刚有这个问题，我发现的修复（感谢Quirksmode）是给你的节点的直接父母，你试图设置它自己的Z – 索引的Z – 索引是小于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 { position: relative; z-index: 1001; } .content { position: relative; z-index: 1000; }
在我看来，你有一些格式不正确的HTML在那里。 我试着计算，也许我失去了打开和closures标签计数，但它看起来像div＃容器没有closures。 尝试通过validation器（如W3C的HTMLvalidation器，或其他）运行您的页面，并修复一些错误。 这在过去帮助我解决了这些问题。 祝你好运！
我最近有一个问题显示在另一层之上。 在我的情况下，我是以编程方式在Javascript中创build两个图层，一个用于显示自定义控件，另一个用于创build背后的全屏幕图层。 FF是好的，埠IE浏览器显示全屏幕层总是最重要的一切。
在经过众多的networking拖网之后，尝试每个人的build议，我最终得到它的唯一方法就是从两个层中删除position:属性，并调整margin-top:属性，直到获得满意的结果。
有点哈希，但它的工作原理，它会没事的，直到IE 8整理当前的所有错误……
唯一可靠的解决scheme是，将下面的顶层元素放在代码中，然后用绝对定位将它们推到其他东西上。
例如Wordpress：将导航放在页脚文件中，但仍然在页面包装内。
也可能会为search引擎带来一些优势，因为他们可以直接从内容开始，而不需要先通过菜单爬行…
更新：我需要纠正自己。 把元素放在下面然后推过去仍然是最简单的方法，但在某些情况下这是不可能的。 那么你必须确保每个父元素都有某种定位和一些有意义的Z-index 。 那么即使在IE7中，z-index也应该可以工作。
