Z-Index

Use z-index utilities to control the stacking order of overlapping elements. Higher values appear on top of lower values.

Basic example

Style('z-40 ...', child: Text('05'))
Style('z-30 ...', child: Text('04'))
Style('z-20 ...', child: Text('03'))
Style('z-10 ...', child: Text('02'))
Style('z-0 ...', child: Text('01'))

Using negative values

Style('...', child: Text('05'))
Style('...', child: Text('04'))
Style('-z-10 ...', child: Text('03'))
Style('...', child: Text('02'))
Style('...', child: Text('01'))

Class reference

Class	Value	Description
z-0	0	Stack order 0
z-10	10	Stack order 10
z-20	20	Stack order 20
z-30	30	Stack order 30
z-40	40	Stack order 40
z-50	50	Stack order 50
z-auto	auto	Use default stacking order
-z-10	-10	Negative stack order 10
-z-20	-20	Negative stack order 20
-z-30	-30	Negative stack order 30
-z-40	-40	Negative stack order 40
-z-50	-50	Negative stack order 50
z-[<value>]	<value>	Arbitrary integer z-index

Custom properties

The CSS custom property form z-(<css-variable>) (e.g. z-(--my-z)) is resolved against theme-defined StyleThemeData.customProperties — it behaves like z-[<value>] when the theme defines the property. Cascade-inherited or JS-set CSS variables remain out of scope.