solving overlapping stacking contexts.
Hey, In this example i have two divs that are
containers. they both each create a new stacking context. The red box overlaps the text, however if i'd like the text to overlap the red box, i can't do that unless i add something like position: relative and z-index to the text. It makes sense to do so but since the text element doesn't use position: relative i'm adding it for the sake of overlapping content which doesn't feel right? I assumed the z-index: -99 on the red box would have solved it but since they're their own individual stacking contexts it has no effect.
https://codepen.io/deerCabin/pen/OJKexQj
Is there a more appropriate way to solve this sort of thing? Thanks in advance.4 Replies
Hey I’m unsure if I understand exactly what the parameters of your question are, or what exactly you’re trying to solve - but if I wanted the text to overlap the red container I would just put the text within its own <p> tags or more relevant tags. It should automatically overlap the parent div element, but you could just pop a higher z-index on there to be safe.
Putting it inside of a p tag doesn’t change anything, I just put the text in a div for example purposes.
It doesn’t automatically overlap the text because the fact they’re containers make them create a new stacking context, they are both in seperate stacking contexts. I have to add position relative to the text for the one I want to overlap because z index only works on positioned elements or in grid. Adding position absolute or grid seems redundant to add if I’m not actually using either of them for their intended purpose
I was asking if there was a better way of handling it.
Okay, it seems like I understand the context a little better. This is how I would do it.
https://codepen.io/WilCoYo/pen/jOggKBL
If you absolute need that pseudo element. Then this is how I would do it.
https://codepen.io/WilCoYo/pen/rNXXKwr