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(modal)
z(overlay)
z(dropdown)
z(popover)
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);
}