Issue with positioning ::before pseudo-element behind the main element
'm having an issue with CSS styles for an element with the class .vision-card and its ::before pseudo-element. I'm trying to hide the pseudo-element behind the main element using z-index: -1;, but it doesn't seem to be working. Here are my styles:
https://codepen.io/jackyiakovenko/pen/KKJgobr?editors=1100
5 Replies
the background-filter: blur creates a new stacking context that prevents elements going behind it.
what you can do is put the background-effect also on a pseudo element
here i used the ::after element for the background, border and blur
the ::before gets a z-index of -2
the ::after a z-index of -1
you don't need a z-index on the container itself
thnx man 👌
no problem, good luck