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

Question

在决定 HTML 中元素的堆叠顺序时，z-index 和 opacity 有什么关系？

当我在一个有一些 z-index 的元素上保持 opacity 小于 1 时说 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

除了 opacity stacking context Alexey Ten pointed out in （这里是一个因素）之外，z-index 是相对于元素的容器的。在这种情况下，您的蓝色和绿色元素都包含在未定义 z-index 的单独 div 父级中。由于 HTML 排序，后一个 div（蓝色框的那个）将出现在前一个（绿色框的那个）之上。

在下面的示例中，我将 class .first 添加到第一个父 div 并将 .second 添加到第二个，然后给它们自己的z-index 个属性。

.green, .blue {
  position: absolute;
  width: 100px;
  color: white;
  line-height: 100px;
  text-align: center;
}

.green {
  z-index:999999999;
  top: 90px;
  left: 60px;
  background: green;
}
.gp{
  opacity:0.99;
}
.blue {
  top: 100px;
  left: 100px;
  background: blue;
}

.first, .second {
  position: relative;
}

.first {
  z-index: 2;
}

.second {
  z-index: 1;
}

<div class="first">
  <span class="green">Green</span>
</div>
<div class="second">
  <span class="blue">Blue</span>
</div>

Answer 2

z-index 值不是 "auto" 的定位元素和不透明度值小于 1 的元素生成堆叠上下文。参考rules regarding the painting order.

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

已定位具有正 z-index 的绿色框
使用 auto z-index

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

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

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

两个元素都属于同一类别（参见第 8 条规则）。在这种情况下，HTML 顺序确定哪个元素出现在前面。蓝色框出现在源代码顺序的后面，所以它出现在前面。

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

Stacking order of elements affected by opacity

css

z-index