如果属性不同，为什么堆叠上下文的根元素不堆叠？

Question

今天我感到非常惊讶，因为 transform 不是 none 的元素没有堆叠在 position 是 absolute 的元素之上尽管有更高的 z-index。但是，将 position:absolute|relative 添加到前一个元素使 z-index 在它们之间按预期执行。

看一看：我预计下面的绿色方块（transform:translateX(0)）会堆叠在所有其他方块之上，因为它具有最高的 z-index，但它只堆叠在蓝色方块之上DOM 中它前面的正方形。我将其归因于具有 z-index:0 和一些退化行为的蓝色方块，就好像两者都有 z-index:0.

div {
  opacity:0.8;
  width:100px;
  height:100px;
}
body {
  margin:10px;
}

<div style="background-color:blue; position:absolute; top:0px; left:0px; z-index:0;">
</div>
<div style="background-color:green; transform:translateX(0); z-index:2;">
</div>
<div style="background-color:red; position:absolute; top:20px; left:20px; z-index:1;">
</div>

我的期望是上面的所有元素都在根堆叠上下文中。怎么回事？

Answer 1

z-index 适用于弹性项目和定位元素（元素“定位”意味着它具有非静态的位置值，例如相对、绝对和固定). 如果您尝试在未指定位置的元素上设置 z-index，它将不会执行任何操作。

所以，只需将 green div 的 position 设置为 relative/absolute/fixed，它将堆叠在所有 div 的顶部。

div {
  opacity:0.8;
  width:100px;
  height:100px;
}
body {
  margin:10px;
}

<div style="background-color:blue; position:absolute; top:0px; left:0px; z-index:0;">
</div>
<div style="background-color:green;position:relative; transform:translateX(0); z-index:2;">
</div>
<div style="background-color:red; position:absolute; top:20px; left:20px; z-index:1;">
</div>

如果属性不同，为什么堆叠上下文的根元素不堆叠？

Why don't root elements of stacking contexts stack if their properties differ?

css

z-index