如何z-index与opacity决定在HTML堆叠元素的订单时，有关系吗？
当我保持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>具有“自动”以外的z索引值的定位元素和不透明度值小于1的元素会生成堆叠上下文。请参阅有关喷漆顺序的规则。
在您的第一个示例中，我们具有带有多个后代的根堆栈上下文，包括：
autoz-index的蓝色框带有autoz-index的蓝色框位于后面；Z索引为正的绿色框位于前面（请参见规则8和9）。
在您的第二个示例中，我们有：
这两个要素属于同一类别（见规则8）。在这种情况下，HTML顺序确定哪个元素出现在前面。蓝色框按源顺序显示在后面，因此它出现在前面。
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句