Question

我正在尝试创建一个类似工具提示的系统，其中一个mouseenter事件会导致div显示，这将覆盖内容。不幸的是，我遇到的问题是DOM中的内容以后并没有在IE7中消失，而之前的内容正在z-indexed元素后面正确消失。

以下是一些说明问题的示例代码：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<body>

<style>
  .container { margin-top: 200px; }
  .node { float: left; width: 100px; height: 100px; background: #eee; margin-right: 50px; position: relative;}
  .two { position: absolute; left: -200px; top: 20px; width: 500px; height: 500px; background: green; z-index: 200;}
</style>

<div class="container">
<div class="node">
  <div class="one"></div>
</div>
<div class="node">
  <div class="two"></div>
</div>
<div class="node">
  <div class="three"></div>
</div>
</div>
</body>
</html>

要点很简单。 3个相同的灰色方框。除了其中一个盒子外，还有工具提示（巨型绿色盒子）。如果你在Firefox中查看它，它可以正常工作。如果您在IE7中查看它，您会注意到绿色框覆盖第一个节点，第二个节点，但第三个节点显示通过。另外，如果你在.node上设置了z-index：1属性，你会发现即使在Firefox中也表现出相同的行为。

解

感谢下面的回复，我能够在正确的轨道上保持一致。首先，将所有工具提示的z-index设置为最高元素。然后将所有节点元素的z-index设置为较小的数字。我使用10和0.接下来，在悬停时，设置最高兄弟元素的z-index需要高于它的兄弟，我使用5.在这种情况下，如果我想.child2在所有内容之上，那么我需要设置最高父级的z-index，这是我想要覆盖的所有内容的兄弟（这可能是链上的多个父级）。在这种情况下，它是节点。因此，包含.two的节点的z-index需要高于另一个.node的z-index。同样，如果工具提示位于节点 - ＆gt;子节点 - ＆gt;工具提示和该节点与相似的树相邻，然后我需要设置节点z-index（2个父节点）。

Answer 1

如果没有设置（而不是关注节点的父节点），较旧的IE会使用z-index为0启动每个新位置堆栈 - 结果是标记中的最后一个节点总是模糊先前的节点。

为了强制旧IE在这种情况下的行为，您必须为它们共有的最深嵌套级别的所有节点定义一个显式的z-index值，并且它们必须在您遍历文档时下降。完成此操作后，您可以从所有同行中提取任何项目。

以你的例子为例进行简化，让我们说你有这样的标记：

<div class="container">
 <div class="node1">
  <div class="child1"></div>
 </div>
 <div class="node2">
  <div class="child2"></div>
 </div>
 <div class="node3">
  <div class="child3"></div>
 </div>
</div>

您可能希望在整个页面中按降序对“nodeX”元素进行z索引（它们必须都处于相同的嵌套级别），然后您可以为其子级提供有意义的z-index值。

您的基本CSS将是这样的：

/* parent nodes in descending order at same nest level */
.node1 { z-index: 99; }
.node2 { z-index: 98; }
.node3 { z-index: 97; }

/* child nodes contain tooltip data, z-index higher than parent */
.child1 { z-index: 101; display: none; }
.child2 { z-index: 101; display: none; }
.child3 { z-index: 101; display: none; }

...当您想要将其中一个子项显示为工具提示时，您需要将其父z-index设置为高于其他父项。在这种情况下，我们要激活工具提示.child2，它位于.node2：

中

.node2 { z-index: 100; }
.child2 { display: block; }

当你将.node2设置为高于所有其他“.nodeX”项目的z-index时，它（及其子节点）应该能够隐藏相同嵌套级别的节点。

自动化流程

这可能是设置的一个主要痛苦，显然......它很简单，可以设置一些手动条目，比如需要重叠的小型硬编码下拉菜单，但如果你动态生成页面，那么你可能足够聪明，可以使用javascript来帮助你。

重要的是，降序的z-index值必须都在DOM树中的相同的嵌套级别，我不能强调这一点。要为示例中的所有nodeX元素设置降序值（从99开始），我可能会使用这样的一些jQuery代码：

$(document).ready( function() {
    var zidx = 99;
    $('.container>div').each( function() {
        $(this).css('z-index',zidx);
        zidx--;
    });
});

基本上我们只是循环遍历特定级别的元素，并为每个后续元素提供一个较低的z-index。显然，您需要注意可能使用的元素数量，并相应地选择范围。

Answer 2

IE错误地实现了堆叠顺序算法。你必须动态地改变“当前”工具提示的z-index，所以无论哪个是活动的.node，给它一个z-index，比如说10，当打开另一个工具提示时，将它重新分配给初始值。 / p>

据我所知，没有改变源顺序就没有真正的CSS解决方案。

Z-index不会在DOM中进一步向下覆盖div

2 个答案: