Z-index guidelines

[myrta2302]

z-index variables:

In the styles\src\variables_commons.scss file we have:

$zindex-spinner: 990 !default;
$zindex-dropdown: 1000 !default; (top layer)
$zindex-sticky: 1020 !default;
$zindex-fixed: 1030 !default;
$zindex-modal-backdrop: 1040 !default; (top layer backdrop)
$zindex-modal: 1055 !default; (top layer)
$zindex-popover: 1060 !default; (top layer)
$zindex-tooltip: 1070 !default; (top layer)
$zindex-alert: 1080 !default; (top layer)
$zindex-header: 1090 !default;
...

Header z-index has been set so far with the custom property --header-z-index, usually with a default value of 10 (same value as post.ch header's z-index).

1. Are there any general design guidelines for z-index?
2. Should we have tokens for default z-index values?
3. Cleanup of non used z-indices (e.g. #toplayer elements)
4. Documentation needed?

[oliverschuerch]

We will not create any tokens for this.

[gfellerph]

Resolution: Create demo page to identify problematic use cases where two elements try to be on the top layer (open dialog with toast message) and try to figure out how we can control which takes precedence. Also, confirm with an example if e.g. dropdowns or tooltips work in an open dialog in the top layer.