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

Question

我在编码 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>

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/

需要一点解释，谢谢。

Answer 1

Question1: Why If former element has image element, later element go under the image?

这是因为在相同的堆叠上下文中 - 内联级元素（例如图像）绘制在非内联级元素之上（参见）

This article 有一个很好的图像来总结相同堆叠上下文中元素的堆叠顺序：

Question2: Moreover, when later element has opacity other than 1, later element go over the former element (set back to natural order?)

因为在不透明度值小于1的元素上形成了新的层叠上下文

来自 the spec：（大胆的矿）

If an element with opacity less than 1 is positioned, the ‘z-index’ property applies as described in [CSS21], except that ‘auto’ is treated as ‘0’ since a new stacking context is always created.

查看有关堆叠上下文的所有 this MDN article。

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

CSS stack order changes when parent content has image as child, and also other element has opacity

css

z-index

css-position