Notifications partially overlap elements with z-index = 1 about vanilla-framework

[bartaz]

@vladimir-cucu Thanks. I will have a look if we can remove z-index from notifications (and/or highlight bars).

But overall, to avoid such issues, I'd suggest not using z-index of 1 on anything that is supposed to be on top of other things. We don't have any solid guidelines around that, as this is always kind of a chicken-and-egg problem of finding things that are supposed to be on top of each other and those that don't.

We have this example which features various of overlaying elements in Vanilla: https://vanillaframework.io/docs/examples/templates/z-index

You can use that to have a look at their z-indexes.
Overall modals, etc (on top of everything) use 100 or above.
Tooltips are at 11. Contextual menu at 9.
Top navigation (dropdowns) are at 5.
Flat content may have things at 1.

Based on that I'd suggest placing your top navigation somewhere between 5-10.

[vladimir-cucu]

@bartaz Thanks for the detailed explanation! We'll set the z-index to 5 as suggested.

[huwshimi]

Based on that I'd suggest placing your top navigation somewhere between 5-10.

Just in case it's not clear, that top nav is from the application layout and the z-index is set to 1 here: https://github.com/canonical/vanilla-framework/blob/main/scss/_layouts_application-panels.scss#L24.

Should we update the sticky header z-index to 5 in Vanilla to fix it for everyone or is that likely to cause other issues?

[bartaz]

Ah, sorry. I was looking for that into application layout, but missed that it's only in sticky option in panels.
Of course it makes sense to fix it directly there.