为什么 z-index 不适用于不透明度和变换 [重复]

Question

大家好，我在 CSS 中遇到了堆叠上下文的困惑，也就是说，正如您在下面的代码中看到的那样，我使用了 opacity: .99;为两个盒子创建堆叠上下文，并决定对橙色盒子使用 z-index，但橙色盒子没有放在绿色盒子上方。为什么？我认为可以将 z-index 与具有 transform 和 opacity 属性的元素一起使用。我的第二个问题是，由于我是初学者，我只是想问为什么当我使用不透明度或变换为某个元素（例如 div）创建堆叠上下文时，该 div 元素被放置在其他静态元素之上。 z-index 是否添加到幕后的元素中或类似的东西。

.green {
  background: green;
  height: 250px;
  width: 1090px;
  margin-top: -70px;
  opacity: .99;
}

.orange {
  background: orange;
  height: 150px;
  width: 150px;
  opacity: .99;
  z-index: 1000;
}

<div class="orange">Orange</div>
<div class="green">Green</div>

Answer 1

z-index 仅适用于定位元素，即position 属性的值不是static（这是默认值）的元素。

设置position: relative。