You are viewing legacy documentation. View the most recent documentation.


Layering in the Morningstar Design System is defined through a combination of z-index, overlays, and drop shadows. Use layering to focus the user’s attention on a task, provide temporary supplementary information, or define spatial relationships between content.


Z-index is a CSS property that specifies the stack order of an element. An element with greater stack order is always in front of an element with a lower stack order. Z-index is defined within MDS through the following Constants:




Page content

Most page elements, including Tooltips and Popovers



Sticky content

Sticky page elements, like mastheads (and Popovers triggered from a masthead) and navigation



Modal overlay

Modal page overlay



Modal content

Modals, Dialogs, Notifications



As needed

Reserved for edge cases


Overlays work in concert with Modals and Dialogs to temporarily obstruct a user’s access to the underlying page and focus their attention on the content above the overlay. Overlays use a shared class, .mds-overlay, to apply a combination of $mds-color-black and $mds-opacity-overlay to dim the underlying page without hiding it completely.

Example of an overlay used to focus attention on a dialog prompting a user to save their changes. Overlays focus attention on the content above the overlay by obstructing access to the underlying page.

Drop Shadows

Drop shadows visually simulate layering by casting a shadow on objects that fall lower in the z-index. Drop shadows are defined by constants and applied to mastheads, Modals, Dialogs, Tooltips, Popovers, and Notifications.

Variable name


0 2px 4px 0 rgba(0, 0, 0, .08);

Example of drop shadows on popovers, tooltips and mastheads. Drop shadows simulate layering by casting a shadow on objects with a lower z-index.
©2020 Morningstar, Inc. All rights reserved. Terms of Use