Z-Index
Utilities for controlling the stack order of an element.
On this page
layout/z_index_basic
The live demo is not available for this example.
z_index_basic.dart
View source
// Standard values
WDiv(className: 'z-0')
WDiv(className: 'z-50')
// Arbitrary values
WDiv(className: 'z-[100]')
WDiv(className: 'z-[-1]')
Basic Usage#
Use z-{index} to set the stack order of an element. This utility is primarily used with Stack widgets to determine which element appears on top.
Stack(
children: [
WDiv(className: 'z-0 bg-blue-500 w-20 h-20'),
WDiv(className: 'z-10 bg-red-500 w-20 h-20 ml-10 mt-10'),
WDiv(className: 'z-20 bg-green-500 w-20 h-20 ml-20 mt-20'),
],
)
Quick Reference#
| Class | Value | Description |
|---|---|---|
z-0 |
0 | Stack level 0 |
z-10 |
10 | Stack level 10 |
z-20 |
20 | Stack level 20 |
z-30 |
30 | Stack level 30 |
z-40 |
40 | Stack level 40 |
z-50 |
50 | Stack level 50 |
z-auto |
null |
Resets stack level (default) |
Variants#
Hover & Focus#
Control the stack order on interaction. This is useful for "pop-out" effects where an item should rise above others when hovered.
layout/z_index_hover
The live demo is not available for this example.
z_index_hover.dart
View source
WDiv(className: 'z-0 hover:z-50 bg-white shadow-sm hover:shadow-xl')
Responsive Design#
Apply different z-indices at specific breakpoints using the sm:, md:, lg:, xl:, and 2xl: prefixes.
// z-0 on mobile, z-50 on medium screens and up
WDiv(className: 'z-0 md:z-50')
Dark Mode#
Use the dark: prefix to apply specific z-indices when the application is in dark mode.
WDiv(className: 'z-10 dark:z-20')
Arbitrary Values#
Use square brackets [] to apply custom z-index values that aren't part of the theme. This supports both positive and negative integers.
// Custom positive value
WDiv(className: 'z-[100]')
// Custom negative value
WDiv(className: 'z-[-5]')
Customizing Theme#
To extend or override the default z-index scale, modify the zIndices property in WindThemeData.
WindThemeData(
zIndices: {
// Override defaults
'0': 0,
'50': 50,
// Add custom values
'100': 100,
'modal': 9999,
'popover': 5000,
},
)
Usage with custom theme:
WDiv(className: 'z-modal') // Applies z-index: 9999
WDiv(className: 'z-popover') // Applies z-index: 5000