Pseudo -element
Pseudo-element z-index not working , I want the gradient background to be behind the parent element
https://codepen.io/aldrinbright/pen/RwBZNrw
5 Replies
what do you want it to look like. There are a lot of positions, z-indexes and isolationmodes going on. And that messes up the stacking options. It can be a lot cleaner, but then I'll need to know what the end result should be
i think you are trying something like this (no pseudo elements necessary), but am not sure. Just let me know
https://codepen.io/MarkBoots/pen/MWBvBoy?editors=0100
i want the end result to look just like what you have done, but I want to know what's wrong with my code
When you use
isolation: isolate, that creates a new stacking context, which means that elements that are inside of it (which includes psuedo-elements) can only stack within that element, so a z-index: -1 will only be in relation to other elements inside that stacking context, it can't go behind the element itself.
And actually, you have 3 things creating a stacking context, so for your solution to work, you'd have to remove all of them:
- isolation: isolate
- transform (any transform creates a new stacking context)
- z-index
If you do want to use pseudo-elements, you'd need 2 of them. You could use the gradient that you have now with a z-index: -2, and then add another for the dark background with a z-index: -1Thanks, this solved my problem.