Z Index
Kawal susunan tindanan
Sintaks
layout="z:[value]"Nilai
| Nilai | CSS Output | Huraian |
|---|---|---|
base | z-index: var(--z-base) | Lapisan asas (0) |
low | z-index: var(--z-low) | Lapisan rendah (10) |
mid | z-index: var(--z-mid) | Lapisan tengah (50) |
high | z-index: var(--z-high) | Lapisan tinggi (100) |
top | z-index: var(--z-top) | Lapisan teratas (9999) |
Contoh
html
<div layout="z:top">On top</div>Pratonton
Lapisan Z-Index
layout="z:high" - Kawal susunan tindanan elemen yang diletakkan
z:basez:lowz:midz:high
Lihat Kod
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>