我知道opacity会创建一个新的堆叠上下文，如post by Philip Walton所示。
在下面的代码中，设置第二个孩子div的opacity: .8低于第一个孩子opacity: .9的{{1}}，第二个孩子仍然出现在第一个孩子div之上。为什么呢？
HTML
wrapperCSS
<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>
https://jsfiddle.net/fy9sznjp/1/
有人可以告诉我为什么较低的.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 }
子堆栈高于opacity div。
答案 0 :(得分：2)
这两个元素的opacity属性与1不同，因此bottom显示top opacity，opacity的值不确定它们被绘制的顺序。如果1与 DB::table('foo_table')
->select('week_id', DB:raw('max(value) as max_value'))
->groupBy('week_id')
->get();
不同，则非常重要。