solving overlapping stacking contexts.
Hey, In this example i have two divs that are
https://codepen.io/deerCabin/pen/OJKexQj
Is there a more appropriate way to solve this sort of thing? Thanks in advance.
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.

