受不透明度影响的元素的堆叠顺序

Question

在决定 HTML 中元素的堆叠顺序时z-index，它们之间的opacity关系如何？

当我保持opacity少于1某个有z-index发言权的元素时999。该元素位于没有z-index.

$(function() {
  $("#checkbox1").on("change", function() {
    $("#green-parent").toggleClass("add-opacity", this.checked);
  });
});

.green,
.blue {
  position: absolute;
  width: 100px;
  line-height: 100px;
  text-align: center;
  color: white;
}
.green {
  z-index: 999999999;
  top: 50px;
  left: 50px;
  background: green;
}
.blue {
  top: 60px;
  left: 90px;
  background: blue;
}
.add-opacity {
  opacity: 0.99;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

<input id="checkbox1" type="checkbox" value="1">
<label for="checkbox1">Add opacity to green box parent</label>


<div id="green-parent">
  <span class="green">Green</span>
</div>
<div>
  <span class="blue">Blue</span>
</div>

Answer 1

z-index 值不是“auto”的定位元素以及不透明度值小于 1 的元素会生成堆叠上下文。请参阅有关涂装顺序的规则。

在您的第一个示例中，我们有根堆栈上下文以及各种后代，包括：

• 具有正 z 索引的定位绿色框
• auto带有z 索引的定位蓝色框

带有z-index的蓝色框auto放在后面；具有正 z 索引的绿色框放置在前面（参见规则 8 和 9）。

在你的第二个例子中，我们有：

• 具有不透明度的元素（包含绿色框；请注意，绿色框上的 z-index 成为该元素的本地元素）
• 定位的蓝色框没有 z-index

这两个要素属于同一类别（参见规则第 8 条）。在这种情况下，HTML 顺序决定哪个元素出现在前面。蓝色框在源顺序中出现得较晚，因此它出现在前面。