Z-Index
Utilities for controlling the stack order of an element in the DOM.
| Class Name | CSS Equivalent |
|---|---|
| index-pullback | z-index: -1; |
| index-surface | z-index: 0; |
| index-footer | z-index: 0; |
| index-content-on-surface | z-index: 1; |
| index-sticky-container | z-index: 2; |
| index-sticky-list-header | z-index: 2; |
| index-sticky-toolbar | z-index: 3; |
| index-sticky-cover | z-index: 3; |
| index-content-on-sticky | z-index: 3; |
| index-fab | z-index: 4; |
| index-scrim | z-index: 5; |
| index-slideout | z-index: 6; |
| index-overlay | z-index: 7; |
Setting the z-index
The z-index property specifies the stack order of an element. An element with greater stack order is always in front of an element with a lower stack order. Here are some examples of how to use these classes:
html
<div class="relative h-3xs w-full">
<div class="[ surface-container-highest left-1/12 ] index-overlay">Overlay</div>
<div class="[ surface-container-high left-2/12 ] index-scrim">Scrim</div>
<div class="[ surface-container left-3/12 ] index-fab">FAB</div>
<div class="[ surface-container-low left-4/12 ] index-surface">Surface</div>
<div class="[ surface-container-lowest left-5/12 ] index-pullback">Pullback</div>
</div>