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(modal)`	Modal
`z(overlay)`	Overlay
`z(dropdown)`	Dropdown
`z(popover)`	Popover
`z(content)`	Content
`z(controls)`	Controls

Layers

z(overlay)

z(content)

z(controls)

<div class="demo-layers">
  <div class="demo-layer demo-layer--modal">z(modal)</div>
  <div class="demo-layer demo-layer--overlay">z(overlay)</div>
  <div class="demo-layer demo-layer--dropdown">z(dropdown)</div>
  <div class="demo-layer demo-layer--popover">z(popover)</div>
  <div class="demo-layer demo-layer--content">z(content)</div>
  <div class="demo-layer demo-layer--controls">z(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: z(controls);
}