IE 6和IE 7 Z-Index问题

http://madisonlane.businesscatalyst.com

我想把div#sign-post放在div#bottom上面.这适用于除IE6和IE7之外的所有浏览器.任何人都可以看到这里的问题是什么？

此外,IE6还在div#bottom的顶部显示了额外的198px.

1> Tgr..：

---

这里的大多数答案都是错误的; 一些工作,但不是因为他们说的原因.这是一些解释.

这是z-index应该如何根据规范工作:

你可以给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完成的 - 对于下拉菜单,您可以浏览菜单容器或父菜单项,并为它们分配z-index1000,999,998等等.另一种方法:当弹出窗口或下拉菜单变得可见时,找到它所有相对定位的祖先,并给它们一个on-top具有非常高的z-index的类; 当它再次变为不可见时,删除类.

---

谢谢!对于应该总是在所有内容之上的下拉或弹出式窗口小部件,使用jQuery,这很容易修复.打开小部件时调用$(myWidget).parents().addClass('on-top'),关闭它时调用$(myWidget).parents().removeClass('on-top').

---

谢谢你为我解开一个谜!:)我有元素排序的这个问题,每次我觉得我正在使用黑魔法使它工作.

---

你是上帝 真.

2> Darko Z..：

---

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

1)你正在操纵z-index的元素应该在同一个层面上,即.你应该设置#bottom和#body的z-index

如果这不可行那么

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

让我知道这是如何工作的

达科

---

这种行为是因为IE6/7为每个具有position:relative的元素启动一个新的堆叠顺序.http://brenelz.com/blog/squish-the-internet-explorer-z-index-bug/