div 使用 Transform 覆盖另一个 div：翻译属性 [重复]

Question

.two 类根据此处的代码覆盖 .one 。如果我们删除变换：translateY(-40px)，.one 会相应地覆盖 .two。是什么让 .two 中的transform: translateY(-40px) 覆盖了在应用变换属性之前没有发生的 .one 。

div {
  width: 150px;
  height: 150px;
  display: inline-block;
}

.one {
  background: red;
  transform: translateX(50%);
}

.two {
  background: green;
  transform: translateY(-40px);
}

<div class="one"></div>
<div class="two"></div>
<div class="three"></div>

Answer 1

如果我正确理解问题：带有

transform

的元素（

transform: none

除外）自动具有堆叠上下文（元素显示的顺序）。因此，当您从第二个元素中删除

transform

时，它的堆叠上下文就会消失，并且它会自动变得比具有覆盖上下文的元素“更低”。

要手动启用堆叠上下文，您可以使用

position: relative

，如果您需要控制此类元素的堆叠上下文，您可以选择使用

z-index: N

（其中

N

是一个整数）

我建议您阅读这篇文章，您会更加清楚： https://developer.mozilla.org/en/docs/Web/CSS/CSS_Positioning/Understanding_z_index/The_stacking_context