[6.x] Remove global header z index

[JayGeorge]

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.

[jackmcdade]

This will let fieldtypes overlap the global nav. I'm not sure it's necessarily a bad thing though. 🤔

[JayGeorge]

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

[jasonvarga]

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?

[JayGeorge]

I think it feels a bit weird when scrolling

Header.Index.mp4

[jasonvarga]

Hah yeah fair enough