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">
    <div class="demo-layer__background"></div>
    <span class="demo-layer__text">--z-index-modal</span>
  </div>
  <div class="demo-layer demo-layer--overlay">
    <div class="demo-layer__background"></div>
    <span class="demo-layer__text">--z-index-overlay</span>
  </div>
  <div class="demo-layer demo-layer--dropdown">
    <div class="demo-layer__background"></div>
    <span class="demo-layer__text">--z-index-dropdown</span>
  </div>
  <div class="demo-layer demo-layer--popover">
    <div class="demo-layer__background"></div>
    <span class="demo-layer__text">--z-index-popover</span>
  </div>
  <div class="demo-layer demo-layer--content">
    <div class="demo-layer__background"></div>
    <span class="demo-layer__text">--z-index-content</span>
  </div>
  <div class="demo-layer demo-layer--controls">
    <div class="demo-layer__background"></div>
    <span class="demo-layer__text">--z-index-controls</span>
  </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).

CSS example

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