[6.x] Remove global header z index
Due to the way Comboboxes use the Reka Popper component—which is teleported, and doesn't sit in the regular DOM—comboboxes were appearing below the global header, so it looked a little funky when you were using the site selector, like this:
Of the possible solutions, simply removing the z-index in the global header resolves this issue.
I may be overlooking something, but it seems like the global header doesn't actually need a z-index. Long pages still tuck underneath it while scrolling.
The global header has had z-[3] as far back as I can see in the repo history, so I can't see a decision behind it.
This PR removes it and rearranges the z-index stack now that we have one less variable.
This will let fieldtypes overlap the global nav. I'm not sure it's necessarily a bad thing though. 🤔
Ahhh, good catch. Yeah, that looks a bit funky when scrolling through content, but I think we can avoid it…
I added a lower z-index value of --z-index-above, which fixes that, while still allowing the combobox to be above.
Before adding --z-index-above to the global header
Field popovers appear above the global header
After
Field popovers are tucked underneath the global header
with the combobox still working
I would expect "popover" type UI elements to be on top of everything. Why would it be preferable to have the header block the thing you've most recently interacted with?
I think it feels a bit weird when scrolling
https://github.com/user-attachments/assets/ec3eaec8-010e-43c6-8cb6-6f68b743bd4c
Hah yeah fair enough