Positioning Elements Above Popover

[quick007]

I've noticed an issue with popovers that hamper what could be an incredible component. I'd be happy to contribute this to the spec via a pr, but I thought the best way to proceed would be to start with an issue.

Issue: Z-Height

There is some content that needs to be above all other content, no matter the situation (i.e. notifications). Traditionally, this was solved by adding a copious amount of 9s to the z-index property (this is a joke), but popovers supersede all other content. This choice makes sense of course, but there should be a CSS property that should allow content to appear above popovers.

[keithamus]

I think the first issue is solved by css anchor positioning.

The second issue is mostly addressed with popover=hint.

[lukewarlow]

As Keith says issue 1 is addressed by anchor positioning.

Issue 2 one expample I've seen is a sticky header bar that people want to be on top. I believe this can be addressed by hiding popovers when it's anchor is obscured. Which I believe is already possible, it might need some refining to ensure it does account for this scenario though.

[quick007]

I was unaware of the anchor style, thanks for letting me know!

In terms of z indexing, hint isn't a real solution as I would like to keep the rest of the popover features that come with auto

@lukewarlow Can you explain a bit more about how that might work? In my case, notifications are wholly unrelated to the current popover and don't know its ID, but must be visible above it.

[lukewarlow]

hint and auto are relatively similar, they both have light dismiss and close on ESC. The difference is mostly about which other popovers they close.

I'm assuming you don't want a notification to close an open menu popover for example? But you probably do want it to close other notifications? In which case I think hint probably is what you want?