当父内容将图像作为子内容,并且其他元素具有不透明度时,CSS堆栈顺序会发生变化

在编写css时,我发现了一些奇怪的行为,特别是使用负边距将元素堆叠在其他元素上。

我理解自然的堆叠顺序,即当元素重叠时,后面的元素总是位于顶部(不使用相对、绝对定位)。

问题1:为什么前一个元素有图像元素,后一个元素在图像下?

问题2:此外,当后一个元素的不透明度不是1时,后一个元素超过前一个元素(回到自然顺序?)

HTML:

<div class="box sample1">
        <img src="http://fillmurray.com/100/100" alt="">
</div>
<div class="box sample1-2">opacity: 1</div>


<div class="box sample1-3">
    <img src="http://fillmurray.com/100/100" alt="">
</div>
<div class="box sample1-4">opacity: .9</div>

SCS:

.box {
    width: 100px;
    height: 100px;
}
.child {
    width: 80px;
    height: 80px;
}
.sample1 {
    background-color: yellow;
    width: 300px !important;
}
.sample1-2 {
    background-color: red;
    margin-top: -40px;

    .child {
        // background-color: green;
    }
}

.sample1-3 {
    // opacity: .9;
    width: 300px;
    background-color: green;
}
.sample1-4 {
    opacity: .9; //this changes stack order
    background-color: red;
    margin-top: -40px;
}

演示: https://jsfiddle.net/nori2tae/4w62t746/8/

需要一些解释,谢谢。