当父内容将图像作为子图像时，CSS堆栈顺序会更改，而其他元素也具有不透明度

Question

我在使用负边距对其他元素上的堆栈元素进行编码时，发现了奇怪的行为。

我理解自然堆栈顺序，当元素重叠时，后面的元素总是在顶部（不使用相对的绝对定位）。

问题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>

SCSS：

.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/

需要一点解释，谢谢。