Z Index
The z-index CSS property sets the z-order of a positioned element and its descendants or flex items. Overlapping elements with a larger z-index cover those with a smaller one.
Usage
Place the class on any element to change the z-index order.
Auto - The box does not establish a new local stacking context. The stack level of the generated box in the current stacking context is the same as its parent's box.
Number - This
Modifier selectors
| Modifier selector | Description |
|---|---|
slb-z-index-auto |
Auto generate stack level. |
slb-z-index-100 |
Z-index stack 100. |
slb-z-index-200 |
Z-index stack 200. |
slb-z-index-300 |
Z-index stack 300. |
slb-z-index-400 |
Z-index stack 400. |
slb-z-index-500 |
Z-index stack 500. |
.slb-z-index-auto - Auto generate stack level.
Some content to go up in the z-index stack
.slb-z-index-100 - Stack level 100.
Some content to go up in the z-index stack
.slb-z-index-200 - Stack level 200.
Some content to go up in the z-index stack
.slb-z-index-300 - Stack level 300.
Some content to go up in the z-index stack
.slb-z-index-400 - Stack level 400.
Some content to go up in the z-index stack
.slb-z-index-500 - Stack level 500.
Some content to go up in the z-index stack
utilities\z-index\util-z-index.hbs
<div class="[modifier class]">
<h5>Some content to go up in the z-index stack</h5>
</div>
Source:
utilities/utils/_z-index-utils.scss