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

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 指数的定位绿色框
• 具有autoz 索引的定位蓝色框

带有autoz指数的蓝色框放在后面;带有正z指数的绿色框放在前面(见规则8和9)。

在您的第二个示例中，我们有：

• 具有不透明度的元素(包含绿色框;请注意，绿色框上的 z 索引成为此元素的局部索引)
• 无 z 索引的定位蓝色框

这两个要素属于同一类别(见规则8)。在这种情况下，HTML 顺序决定了哪个元素出现在前面。蓝色框在源顺序中稍后出现，因此它显示在前面。

Answer 2

除了 Alexey Ten 在他的评论中指出的opacity堆叠上下文(这是一个因素)，z-index是相对于元素容器的。在这种情况下，您的蓝色和绿色元素都包含在单独的div父元素中，这些父元素没有定义的z-index。由于HTML排序，后一个div(带有蓝色框的那个)将出现在前一个(绿色的)的顶部。

在下面的示例中，我将类.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>