Layers

Layers are used to give order and preference on components. The most common applications of Layer are on Modals and Tooltips.

Z-index variable Layer
--z-index-modal Modal
--z-index-overlay Overlay
--z-index-dropdown Dropdown
--z-index-popover Popover
--z-index-content Content
--z-index-controls Controls

Layers

--z-index-modal
--z-index-overlay
--z-index-dropdown
--z-index-popover
--z-index-content
--z-index-controls
<div class="demo-layers">
  <div class="demo-layer demo-layer--modal">--z-index-modal</div>
  <div class="demo-layer demo-layer--overlay">--z-index-overlay</div>
  <div class="demo-layer demo-layer--dropdown">--z-index-dropdown</div>
  <div class="demo-layer demo-layer--popover">--z-index-popover</div>
  <div class="demo-layer demo-layer--content">--z-index-content</div>
  <div class="demo-layer demo-layer--controls">--z-index-controls</div>
</div>

Description

Generally, setting a --z-index-modal is unnecessary and should be avoided. If a z-index value is needed, use the following z-index variables (for the corresponding layers).

SCSS example

.my-control {
  z-index: var(--z-index-controls);
}