-1

I added opacity and scale to a list element. When I did, they were displayed in front of previous elements when scrolling.

I couldn't find a reason for this behaviour in the CSS specification.

Why do these elements come to front?

Here's a JSFiddle demonstrating the issue:

https://jsfiddle.net/r9utp28v/2/

Just scroll the result down.

AxD
  • 2,714
  • 3
  • 31
  • 53
  • https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_positioned_layout/Understanding_z-index/Stacking_context – Kaiido Aug 10 '23 at 01:34
  • That's just how CSS is built, and that's why you have the `z-index` property, I'm guessing this behaviour is based on the asumption that any element with `opacity/scale: 0` is destined to be hidden, therefore these elements have a priority on the rendering – savageGoat Aug 10 '23 at 06:25

0 Answers0