Z-index strategy

[lyubomir-popov]

We have had some z-index clashes, e.g.:

canonical/snapcraft.io#2765
#3068

Which highlights a bigger issue - there's no way of knowing what z-index to use to position something above / under a certain component. In additino to fixing these, we need to document them so you can easily decide which range to use if you want to go above / under a certain component. An interesting article on the subject:

https://www.smashingmagazine.com/2019/04/z-index-component-based-web-application/

[anthonydillon]

We have tackled this in the passed using z-index systems such as:

• Juju GUI - This pattern allowed for map of the z-index for each component
• Juju dashboard - More limited but allows 11 layers.

The issue here is the combination of a suite of components. This can not be managed from a central system as the examples above are. There as been a long discussion on the subject in the practises.

I would suggest we try and keep this system if a system at all. As simple as possible. I have not seen many of these issues and the two found initially could be resolved without causing further issues.

[lyubomir-popov]

Thanks for pointing to the discussion @anthonydillon. Wasn't envisioning anything complicated, maybe something as simple as adding the list of ranges in that other discussion in a more visible place in the documentation might suffice if that's still valid?