No Results Found
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">
<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>
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);
}