Why can't I see the #333 background?
https://codepen.io/abhioncss/pen/WbQaYmJ
I understand the z-index is working because I see the text inside the div. But how do I bring the #333 background forward and use inset: - 10px on the pseudo element?
Should I make a wrapper element around the div and set z-index relative to that?
4 Replies
The reason for this is because you have z-index on the div
it creates a new stacking context so no matter how low z-index you put on your pseudo element, it can never go behind your parent
Unless you remove the z-index from the parent (the div)
You can watch this one
https://www.youtube.com/watch?v=uS8l4YRXbaw
Kevin Powell
YouTube
Solve your z-index issues | z-index and stacking context explained
While it would be handy (at times) for z-index to be a global value, the truth is, it isn't. It's related to its local stacking context, which can be created by a parent with its own z-index value, but also by other properties such as transform, opacity, and many more, which is something most people aren't aware of.
In this video, I look at wha...
Got it. Thanks..