Stacking Context Q- Backdrop Filter
How do i fix it so the ::before element is behind the card again while still applying the blur filter?
https://codepen.io/Miss-Fox/pen/BaExrPe
5 Replies
indeed it makes a new stacking context,that prevents anything to go behind it.
in this case you could use a second pseudo (the ::after) for the background of the card and put the backdrop filter on that
here a quick example https://codepen.io/MarkBoots/pen/Pogevob
even without the backdrop filter, giving the "card" a z-index: 5 while the ::before has a z-index: -5 does the same thing?
oh no, i was worried there was no other way around it
I had to look it up and found this answer in a stack overflow (didn't look at the specs yet myself):
"childs with a negative z-index can not go behind a parent that has a non-auto z-index".
so it looks like a z-index also creates a new stacking-context itself
so it looks like a z-index also creates a new stacking-context itself
Okay I’m remembering this from one of KPows videos now that you say it. Wish I knew which one but something about giving the parent a zindex makes that new stacking context so then you can give all the children a zindex and stack them how you want but it’s like using isolation:isolate and nothing can go outside anymore . So the ::before is -5 but that -5 is scoped within the parent not outside of it. Thanks for the tip, it’s jogged my brain.