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 |