Position

Set the positioning method

Syntax

layout="[position-value]"

Values

Value	CSS Output	Description
static	position: static	Default positioning
relative	position: relative	Relative to normal position
absolute	position: absolute	Absolute within container
fixed	position: fixed	Fixed to viewport
sticky	position: sticky	Sticky positioning

Examples

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

Preview

Relative Position

layout="relative" - Element positioned relative to normal flow

Relative ContainerAbs

View Code

<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>

Sticky Position

layout="sticky" - Element sticks when scrolling past it

Sticky Header

View Code

<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>