为什么z-index无法使用不透明度和变换

Question

大家好，我在CSS中遇到了堆叠上下文的困惑，也就是说，正如您在下面的代码中所看到的，我使用了不透明度：.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（默认值）。< / p>

设置position: relative。