为什么在相同的堆叠上下文中(但后来在 html 中)具有较低不透明度的 div 以较高的不透明度堆叠在 div 之上

Question

我知道opacity创建了一个新的堆叠上下文，正如菲利普·沃尔顿(Philip Walton)在这篇文章中所展示的那样。

在下面的代码中，设置第二个子div 的opacity: .8低于第一个子级的opacity: .9wrapper仍然第二个子级出现在第一个子级之上。

.HTML

<div id="wrapper">
<div class="block top">
Lorem ipsum dolor immet. Lorem ipsum dolor immet. Lorem ipsum dolor immet. Lorem ipsum dolor immet. Lorem ipsum dolor immet. Lorem ipsum dolor immet. 
</div>
<p class="block bottom">In-flow para. In-flow para. In-flow para. In-flow para. In-flow para. In-flow para. In-flow para. In-flow para. In-flow para. In-flow para. In-flow para. In-flow para. In-flow para. </p>
</div><!-- END HTML -->
</body>

.CSS

.block{
width: 200px; padding: 10px;
border: 2px solid;
background-color: yellow }
.top { 
margin-bottom: -70px;
opacity: .9 }
.bottom {
opacity: .8;
background-color: red;
margin: 0 }

https://jsfiddle.net/fy9sznjp/1/

有人可以告诉我为什么较低的opacity子堆叠高于较高的opacitydiv。

Answer 1

这两个元素都有一个与1不同的opacity属性，所以bottom显示在top上，opacity的值，并不决定它们的绘制顺序。opacity是否与1不同才重要。