Layouts
Z-Index
Utilities for sets the z order (stack order) of a positioned element.
Class
| class | css |
|---|---|
| z-0 | z-index: 0 |
| z-10 | z-index: 10 |
| z-20 | z-index: 20 |
| z-30 | z-index: 30 |
| z-40 | z-index: 40 |
| z-50 | z-index: 50 |
| z-auto | z-index: auto |
Usage
<!-- Example -->
<y class="z-10">
...
</y>Customize More
// @file: `src/_plugins.scss`
@include plugin(
(
utility: 'z-60',
//variant: 'responsive',
property: 'z-index',
modifier: (
'60': '...',
'70': '...'
...
)
)
)Variant
| Variant | Enabled | Responsive |
|---|---|---|
| Default | Yes | Yes |
| Dark Theme | ||
| hover | Yes | |
| group-hover | ||
| focus | ||
| focus-within | Yes | |
| active | ||
| visited | ||
| checked | ||
| disabled |
