Position

Tetapkan kaedah kedudukan

Sintaks

layout="[position-value]"

Nilai

Nilai	CSS Output	Huraian
static	position: static	Kedudukan lalai
relative	position: relative	Relatif kepada kedudukan normal
absolute	position: absolute	Mutlak dalam bekas
fixed	position: fixed	Tetap pada port pandangan
sticky	position: sticky	Kedudukan melekit

Contoh

<div layout="absolute">Absolute positioned</div>
<div layout="fixed">Fixed to viewport</div>

Pratonton

Kedudukan Relatif

layout="relative" - Elemen diletakkan relatif kepada aliran normal

Relative ContainerAbs

Lihat Kod

<div layout="relative" space="p:medium" visual="bg:neutral-100 dark:bg:neutral-900 rounded:medium">
  <span space="p:small" visual="bg:primary text:white rounded:small">Relative Container</span>
  <span layout="absolute top:0 right:0" space="p:tiny" visual="bg:danger text:white rounded:small">Abs</span>
</div>

Kedudukan Melekit

layout="sticky" - Elemen melekat apabila skrol melepasi

Sticky Header

Lihat Kod

<div space="p:medium" visual="bg:neutral-100 dark:bg:neutral-900 rounded:medium">
  <span layout="sticky top:0" space="p:small" visual="bg:primary text:white rounded:small">Sticky Header</span>
</div>