Z Index
Control stacking order
Syntax
layout="z:[value]"Values
| Value | CSS Output | Description |
|---|---|---|
base | z-index: var(--z-base) | Base layer (0) |
low | z-index: var(--z-low) | Low layer (10) |
mid | z-index: var(--z-mid) | Middle layer (50) |
high | z-index: var(--z-high) | High layer (100) |
top | z-index: var(--z-top) | Top layer (9999) |
Examples
html
<div layout="z:top">On top</div>Preview
Z-Index Layers
layout="z:high" - Control stacking order of positioned elements
z:basez:lowz:midz:high
View Code
html
<div layout="relative" space="p:medium" visual="bg:neutral-100 dark:bg:neutral-900 rounded:medium" style="height: 80px;">
<span layout="absolute z:base left:0 top:10px" space="p:small" visual="bg:neutral-400 text:white rounded:small">z:base</span>
<span layout="absolute z:low left:30px top:20px" space="p:small" visual="bg:neutral-500 text:white rounded:small">z:low</span>
<span layout="absolute z:mid left:60px top:30px" space="p:small" visual="bg:neutral-600 text:white rounded:small">z:mid</span>
<span layout="absolute z:high left:90px top:40px" space="p:small" visual="bg:primary text:white rounded:small">z:high</span>
</div>