Question

今天，当transform不是none的元素没有叠加到position absolute的元素上时，我感到非常惊讶更高的z指数。但是，将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，则它将不执行任何操作。

因此，只需将position的{{1}}设置为green div，它就会叠加在所有div之上。

relative/absolute/fixed

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

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

1 个答案: