Layers management (z-indexes)

TLDR

We have create a SASS map for managing layer stack, named $z-indexes.

Variable list

Here are the available entries of $z-indexes SASS map. Remember that you don't really need to take care of their value for abstraction purposes, so let's consider them as from higher to lower level layer.

• tooltips for tooltips

• notifications for notifications

• modals for modals and dropdowns

• mobile-navigation for navigation bar on mobile

• transfer-manager for transfer manager in Drive

• previewer for file preview

• floating-frames for floating frames, sush as the composer

• drawer for the drawer

• floating-action-buttons for floating action buttons, sush as new message on mobile

• dropzone for drag and drop zone area

How to use

@use 'sass:map';
@import '~@proton/styles/scss/lib';

.transfers-manager {
    position: fixed;
    z-index: map.get($z-indexes, 'floating-frames');
    /* … */
}
Copy

Special treatment

There's a helper that can be used to make sure that a component is over other ones: .z-up, which is using map.get($z-indexes, 'up') variable. This variable has a lower value than any other layer variable.

Why?

Managing z-indexes of a growing number of components can quickly become tricky: which one should be on top or below of another? At what index does it belong? Does it make sense that it's on the same level as another?

To simplify this process, we create an abstraction with variables intended to find more easily where a component belongs to.

Statements

First of all, let's imagine the z-indexes as layers. It's easier to work with and more understandable.

Then, let's remind ourselves that components placed at the same layer are stacked in an increasing order. That means that the last component in the DOM tree will be on top of other components at the same layer.

Let's remind ourselves also that the z-index property needs to be used in addition to the position property. By doing so, you will create a new stacking context, so all the z-index applied on any children would be scoped inside that stacking context, and won't have any effect on the outside.

Oh, and you can create stacking contexts inside stacking contexts, but good luck with that!

Since those variables don't need to be changed at any time in client side, we chose to use SASS variables instead of CSS variables.

And finally, to give some flexibility, the first hundred of indexes are free for any specific purpose. The lowest layer is defined at 100, the other ones are defined at an incremental step of one hundred. That leaves room for any specificity between those values in a specific layer.