Stacking

Pages of mature applications can reach a high level of complexity. Depending on the system state, a lot of elements can be shown at the same time, in the same context. To prioritize the information for the user, we can elevate important elements so that they overlap and hide less important elements. We must keep track of the order of the element layers to ensure that element priority is clear and no unintended overlaps happen.

The concept of "Stacking" defines which elements should overlap other elements. In Atlas, we use an element-specific stacking.

info

We have defined a stacking scale. The higher an element’s number on this scale, the taller an element will be from the user's point of view. Or, the Default stacking value (which is 1) would be underneath the Layout stacking value (which is 10).

To find out more details about it, make sure to check the Stacking section on the Token overview page.

We understand that once in a while we need a specific layer height, and it's fine as long as it doesn't conflict with any other elements. For that, make sure to have an agreement between design and development and document it.