Z index
z-indexes play an important part in how our components overlay and interact with one another. Z-index tokens determine an item’s position in the stacking order.
Tokens
| Value | SCSS Variables | Usage |
|---|---|---|
| 1000 | $gel-zindex-layer-1 | dropdown |
| 1020 | $gel-zindex-layer-2 | sticky |
| 1030 | $gel-zindex-layer-3 | fixed |
| 1040 | $gel-zindex-layer-4 | modal backdrop |
| 1050 | $gel-zindex-layer-5 | offcanvas |
| 1060 | $gel-zindex-layer-6 | modal |
| 1070 | $gel-zindex-layer-7 | popover |
| 1080 | $gel-zindex-layer-8 | tooltip |
Demo
1000
1020
1030
1040
1050
1060
1070
1080