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.
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.
Shadows provide cues about depth, direction of movement, and surface edges. A surface’s shadow is determined by its elevation and relationship to other surfaces.
Because shadows express the degree of elevation between surfaces, they must be used consistently throughout your product. Higher shadows must be positioned above lower shadows in the z-index.
Use one of the following classes to add shadow depth;
Below are a few examples of shadows being used to create depth with our UI Elements.
Use shadows to make card elements pop based on importance.
Use shadows to separate modal dialogs from the main content layer.