[EuiPopover] Popover is placed above header (z-index)

[akaRem]

to reproduce:

• go to https://elastic.github.io/eui/#/display/tour
• scroll down to example

or

• go to https://elastic.github.io/eui/#/layout/popover
• in first example click show popover, scroll down a little bit

[miukimiu]

This issue visually looks like a bug but is not. In some situations, the popover can be very close to the top of a page and once we open it we can't read the content because it would slip underneath the EuiHeader.

Having the EuiPopover with a higher z-index than the EuiHeader can prevent this type of issue: #3398.

[miukimiu]

I reponed the issue and added a discussion label because I think these two scenarios from #3398 could be prevented if both EuiPopover's were implemented with the anchorPosition set to "downCenter", "downLeft" or "downRight"

For example, nowadays in Kibana, the popover of the example above is positioned "downLeft".

So lowering the EuiPopover z-index makes sense if we think no one is going to implement it close to the header with an anchor position that is not down.

@cchaos @myasonik @thompsongl any thoughts?

[cchaos]

I talked offline with @miukimiu about this and how complicated it gets for consumers to remember the exact settings when their popover is near the header. Right now, at least the contents within the popover will always be visible no matter the placement and that's the main thing. Yes it looks funny when you scroll and the popover is above a fixed header. But I don't think this problem is easily solved unless we get a context wrapper that manages all the layered/fixed position/portalled elements.

[github-actions]

👋 Hey there. This issue hasn't had any activity for 180 days. We'll automatically close it if that trend continues for another week. If you feel this issue is still valid and needs attention please let us know with a comment.

[github-actions]

❌ We're automatically closing this issue due to lack of activity. Please comment if you feel this was done in error.