`will-change: opacity` 不会创建新的堆叠上下文

Question

在MDN web docs it is mentioned 中，堆叠上下文是在这些场景中形成的：

6. 不透明度值小于 1 的元素
7. 具有will-change 值的元素指定任何会在非初始值上创建堆叠上下文的属性

但是当我将 will-change 设置为 opacity（小于 1 的非初始值）时，堆叠无法按预期工作（红色 div 下方的蓝色 div），请参阅 this fiddle

其他一些场景按预期工作；红色 div 上方的蓝色 div（指向小提琴的链接）

1. Element with a position value absolute or relative and z-index value other than auto
2. Element that is a child of a grid container, with z-index value other than auto

我做错了什么，有没有其他方法可以使堆叠上下文按预期工作

我问是因为有时我无法将位置更改为相对，因为这会影响该元素的绝对子元素

Answer 1

堆叠（创建新层）实际上正在工作。

问题是z-index 仅适用于：

• 定位元素（absolute、relative、fixed、sticky）。
• flex 容器的子元素。

无论是否设置z-index: 30，最后都会保持默认值auto。