Has anyone been able to solve Stacking Context issues between container queries and z-index?
The screen shot shows the issue Container Queries has with z-index. If I turn off container queries, the select dropdown is above. I suppose I could use the native select, but..... 😦
I've been able to use RGBA to handle opacity stacking context issue, but I can't find a work around with z-index.
10 Replies
here's the same without container queries
By the way, for some context, I'm using bootstrap in Svelte as well as Svelecte library for the styled dropdown
Not sure but someone, somewhere mentioned
isolation. Could that work? https://developer.mozilla.org/en-US/docs/Web/CSS/isolationMDN Web Docs
isolation - CSS: Cascading Style Sheets | MDN
The isolation CSS property determines whether an element must create a new stacking context.
where can we see this in action?
I'll try to create a codepen to show you guys how z-index and opacity misbehaves with container queries
Here it is friends, this is so sad!
https://codepen.io/Daniele-Longo/pen/ExBZdYp
you sure this is complete?
Yea, I missed some closing divs but it's there now
Seems I found a hack in case anyone wants to know
You have to add the position relative and stack the z-index
the CQ at the bottom has to have the lowest z-index
Not very dynamic
@Kevin would you be so kind to explain this, or have you encountered this before?
@dlongodev please don't ping people to draw them into your posts, even if they've helped you before