Press/to search

Layouts

Z-Index

Utilities for sets the z order (stack order) of a positioned element.


Class

classcss
z-0z-index: 0
z-10z-index: 10
z-20z-index: 20
z-30z-index: 30
z-40z-index: 40
z-50z-index: 50
z-autoz-index: auto

Usage

z-10z-20z-30z-40z-50
<!-- Example -->
<y class="z-10">
...
</y>

Customization

Read more information about using the Plugin API, and Responsive or Pseudo-Class Variants configuration with the Plugin API.

// Add Values
@include yogurt(
$class: 'z',
$property: z-index,
$modifier: (
10: 10,
20: 20
//...
)
);

// Add Variants
@include yogurt(
$class: 'z',
$property: z-index,
$modifier: (
10: 10,
20: 20
//...
),
$variant: (
'responsive',
'hover',
'focus-within', 'focus-visible'
//...
)
);

Variant

ResponsiveDark ModeLight ModeReduce-MotionPortraitLandscapeHoverGroup-HoverFocusGroup-FocusFocus-VisibleFocus-WithinActiveVisitedCheckedDisabled

Default enabled variants. Read more information about the Responsive and Pseudo-Class Variants.