我试图理解为什么将一个元素的子元素的不透明度设置为1之外的值会使其始终位于该元素兄弟元素的顶部。
.element {
width: 500px;
height: 100px;
background: orangered;
}
.child {
height: 150px;
width: 100px;
background: grey;
opacity: 0.5;
z-index: 1;
}
.sibling {
width: 400px;
height: 100px;
background: skyblue;
z-index: 2;
}
<div class="element">
<div class="child"></div>
</div>
<div class="sibling"></div>
.child
使其按预期位于.sibling
后面,但是对于某些原因,其他不同于此值的不透明度会改变它们的堆叠顺序。这让我认为.element
在某种程度上形成了一个堆叠上下文,但据我所知,它没有满足MDN 网站上的任何标准。
根据我所理解的,CSS 标准没有关于此问题的说明:
由于透明度小于1的元素是由单个离屏图像合成的,因此它之外的内容不能在其内部的内容之间以z轴顺序堆叠。出于同样的原因,实现必须为任何透明度小于 1 的元素创建一个新的堆叠上下文。如果透明度小于 1 的元素未定位,则它将被绘制在与堆栈级别为 0 的定位元素相同的层中,即其父堆叠上下文内。如果透明度小于 1 的元素定位,则“z-index”属性将如[CSS21]中所述应用,但是如果使用的值为“auto”,则该元素的行为与值为“0”时完全相同。有关堆叠上下文的更多信息,请参见[CSS21]第9.9节和附录 E。本段中的规则不适用于 SVG 元素,因为 SVG 有其自己的渲染模型([SVG11]第 3 章)。
我认为它只是说如果你将不透明度设置为除 1 以外的某些值,则该元素将形成自己的堆叠上下文,并且透明元素内的所有内容都将一起变得透明。但在我的示例中,.child
可能会为其内部布局的元素创建自己的堆叠上下文,但该元素本身仍将位于其周围的堆叠上下文中。可以通过将 display: flow-root
设置到 .child
并移除 opacity: 0.5
来强制其创建一个堆叠上下文进行测试,但它将像我通常预期的那样堆叠在 .sibling
后面。
那么这里发生了什么?