CODEWITHSUNDEEP
htmlcssopacitywill-changestacking-context
karam barakat
karam barakat

Reputation: 21

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

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

  1. Element with a opacity value less than 1
  2. 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)

  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

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

Upvotes: 2

Views: 138

Answers (1)

Leo
Leo

Reputation: 947

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

enter image description here

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.

Upvotes: 1

Related Questions