Organise CSS Z-Index

[Huongg]

Description

I feel like we use z-index everywhere and just add random number that works. It will eventually become very hard to debug or fix any styling as z-indexes being added on top of each other.

The goal is to managing z-index and avoiding magic numbers. It will make it easier for every team member to contribute and debug

Possible Implementation

My proposal is to go through all the z-indexes we have and group and give them meaningful names.
Perhaps something like this:

Simple version

$zindex-flowchart: 0;
$zindex-metadata: 1;
$zindex-tooltip: 2;

More advance if we want to go with

$base: 0;
$above: 1;
$below: -1;

$zindex-flowchart: $base;
$zindex-metadata: $above + $base;

[rashidakanchwala]

I like the simpler version. It's easier to understand plus in future when you make more components; it's easier to understand how to place them.

[SajidAlamQB]

Completed in: #2095