`will-change: opacity` doesn't create new stacking context

Question

in MDN web docs it is mentioned that stacking context is formed in these scenarios:

6. Element with a opacity value less than 1
7. Element with a will-change value specifying any property that would create a stacking context on non-initial value

but when I set will-change to opacity (non-initial value of less than 1) the stacking doesn't work as expected (blue div below red one), see this fiddle

some other scenarios works as expected like; blue div above red one (links to fiddles)

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

what am I doing wrong, and is there any other way to make stacking context works as expected

I'm asking because sometime I can't change the position to relative as this will affect the absolute children of that element

Answer 1

The stacking (creation of a new layer) is actually working.

The problem is that z-index works only for:

• Positioned elements (absolute, relative, fixed, sticky).
• Children elements of a flex container.

No matter if you set z-index: 30, at the end it will remain at its default value, auto.