Position EuiProgress over EuiHeader

[ryankeairns]

Summary

In cases where EuiProgress is nested within a parent whose z-index value is lower than EuiHeader (e.g. from a Kibana plugin), the header will overlay the progress bar preventing it from being seen.

To overcome this situation, a user will need to use an EuiPortal while the EuiProgress needs a z-index greater than the default for EuiHeader. This PR adds a z-index to EuiProgress and provides an example use case in the docs.

Checklist

• This was checked in mobile
• This was checked in IE11
• This was checked in dark mode
• Any props added have proper autodocs
• Documentation examples were added
• A changelog entry exists and is marked appropriately
• This was checked for breaking changes and labeled appropriately
• Jest tests were updated or added to match the most common scenarios
• This was checked against keyboard-only and screenreader scenarios
• This required updates to Framer X components

[ryankeairns]

I opted to add to the existing fixed example as opposed to adding a new section since a) they feel related and 2) the latter resulted in some collisions with showing/hiding the fixed top progress bar.

In other words, those two examples aren't aware of one another and just ran over each other atop the page. Having them in the same example file made it much simpler to toggle one off when the other comes on.

[ryankeairns]

One other note, I attempted to push down the content when the header example is shown, but my simple solution (using javascript to set style) didn't work on mobile when the side nav is no longer fixed. It's something we could consider improving about this example, whether now or later.

[snide]

LGTM. Tested locally

[snide]

cc @sqren so he's aware. Will be in Kibana shortly.

[sorenlouv]

Yay! Thanks for the quick reaction!