IE 6、7和8 z-index

Question

我有两个div，overlay和result，z索引分别为100和200。

divs如下：

.overlay {
  width: 100%;
  height: 100%;
  background: #000;
  opacity: 0.5;
  z-index: 100;
}

.results {
  position: absolute;
  z-index: 200;
}

内容通过Ajax拉取，发送到results div，然后用javascript显示。

无论我做什么，覆盖总是位于结果窗口的顶部。我已经尝试在显示结果后立即更改css，但没有什么不同。这种情况只发生在IE 6-8中，我认为这是因为z-index在这些版本中的特殊工作方式。

对于如何将结果框带到视图中有什么见解吗？

Answer 1

在相同的堆叠上下文中，具有较高z索引的元素将出现在具有较低z索引的元素之前。如果两个元素具有相同的z索引，则后一个元素显示在顶部。堆叠环境通过以下方式定义：

使用z-index

• Elements或
• 文档根
• 元素，这些元素是半透明的，即它们在IE7中具有不透明度<1
• ，任何带有position: absolute或<代码>D13的元素(这可能会导致许多错误，因为它是唯一以这种方式运行的浏览器)<代码>H214<代码>F215

如果IE7是一个问题，您可以通过始终将z-index : 1添加到也设置了一些position或opacity的任何元素中，使所有浏览器的行为都相同。