Question

我有一个带有表单字段和动态工具提示的弹出窗口。在每个浏览器中，提示都显示正常，但在IE6 / 7中，它们显示在表单字段下方。经典的错误，但我找不到有效的解决方案。

Here's a screenshot，Firefox 5位于顶部，IE7位于底部。

在没有深入研究代码的情况下，表单具有以下嵌套结构：

div.pp (position: absolute; z-index: 200)
  -> div#le, div#ri
    -> label (position: relative)
      -> span.tip (position: absolute; z-index: 300)

请注意，span.tip是动态生成的并注入标签中，使其成为输入的兄弟。

编辑：Here is a demo。

Answer 1

一般来说，在IE＆lt; 8中，相对定位的父元素的z-index必须高于要覆盖的相对定位的span元素的z-index。

在你的情况下，我会尝试给相对定位的span一个z-index。但是没有整个HTML上下文，很难说清楚。

编辑：看完演示后我会尝试给左边相对定位的标签z-index高于右边的标签：

.pp .le label{z-index: 10}
.pp .ri label{z-index: 5}

Answer 2

问题是IE为相对定位元素的子元素重新创建z索引，这使得无法为不同的工具提示相对于彼此设置z索引。

解决方案在于简化IE的页面。我在标签上粘贴相对定位，绝对定位相对于div.pp的工具提示，并使用javascript正确定位匿名工具提示并动态设置z-index。当提示的z-index lower 比其父级（div.pp）的z-index时，提示正确显示。