Select: allow setting a z-index of the content popover

[hoorayimhelping]

I have a Select in a sticky header. I need the sticky header's z-index to be > 0. Doing this causes the items in the select list to be under the header:

Here is how it looks when I can set the z-index to be higher than the sticky header (i.e. how it should look):

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
click-ui	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Dec 17, 2024 8:15pm

[serdec]

I’m not too much in favour of z-indexes as they will cause the z-index war later on.

What if we try creating a stacking context around the header (e.g isolation: isolate on the parent container)
I would leave the z-index as last resort wdyt?

[vineethasok]

@hoorayimhelping This is not needed as we can add it in a different way by using flex direction of column reverse and maybe using the container in the radix popover
Perhaps we can have a chat on this

[hoorayimhelping]

What if we try creating a stacking context around the header (e.g isolation: isolate on the parent container)
I would leave the z-index as last resort wdyt?

@serdec I agree this should be a last resort. I tried a few different things to create a new stacking context and couldn't get any of the workarounds to work. I'll try some other combinations of them.

This is not needed as we can add it in a different way by using flex direction of column reverse and maybe using the container in the radix popover

@vineethasok okay, I'll try that first. If I can't get it working, I'll send you a message

[hoorayimhelping]

Vineeth helped me to solve this without needing to resort to setting z-index.