4 replies

solving overlapping stacking contexts.

Hey, In this example i have two divs that are

containers

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

position: relative

and

z-index

z-index

to the text. It makes sense to do so but since the text element doesn't use

position: relative

position: relative

i'm adding it for the sake of overlapping content which doesn't feel right? I assumed the

z-index: -99

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.

CodePenR

stacking context

...

KP-C

Kevin Powell - Community•16mo ago•

4 replies

snxxwyy

solving overlapping stacking contexts.

Hey, In this example i have two divs that are

containers

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

position: relative

and

z-index

z-index

to the text. It makes sense to do so but since the text element doesn't use

position: relative

position: relative

i'm adding it for the sake of overlapping content which doesn't feel right? I assumed the

z-index: -99

z-index: -99

CodePenR

stacking context

...

solving overlapping stacking contexts.

Similar Threads

solving overlapping stacking contexts.

Similar Threads

Similar Threads

Similar Threads