Layering

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

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:

Z-index	Constant	Use	Examples
`1`	`$mds-z-index-low`	Page content	Most page elements, including Tooltips and Popovers
`100`	`$mds-z-index-sticky`	Sticky content	Sticky page elements, like mastheads (and Popovers triggered from a masthead) and navigation
`800`	`$mds-z-index-modal-overlay`	Modal overlay	Modal page overlay
`810`	`$mds-z-index-modal-content`	Modal content	Modals, Dialogs, Notifications
`900+`	`$mds-z-index-top-of-the-world`	As needed	Reserved for edge cases

Consider applying a custom z-index value when you compose layered components, e.g., Dialogs, Modals, Popovers, Notifications or Tooltips to meet your product requirements.

Overlays

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.

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	Value
`$mds-box-shadow-drop`	`0 2px 4px 0 rgba(0, 0, 0, .08);`

Drop shadows simulate layering by casting a shadow on objects with a lower z-index.

Link Template