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

Question

在MDN web docs 中提到堆叠上下文是在这些场景中形成的：

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

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

其他一些场景按预期工作；蓝色 div 高于红色一个（链接到小提琴）

2. 具有绝对或相对位置值且 z-index 值不是 auto 的元素
3. 作为网格容器的子元素的元素，其 z-index 值不是 auto

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

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

Answer 1

堆叠（创建新层）实际上是有效的。

问题是z-index仅适用于：

• 定位元素 ( absolute, relative, fixed, sticky)。
• flex容器的子元素。

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