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 |
<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>
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).
.my-control {
z-index: var(--z-index-controls);
}