Position

Position, overflow, and inset utilities for controlling element placement.

Position

Absolute top-end

Absolute bottom-start

Sticky element (sticks to top on scroll)

Fixed (contained by transform parent)

Also available: ui-static

Base

Class	Description
`.ui-position`	Base class

Inset

inset-0 fills parent

inset-block-0 + start-0

top-1 end-1

bottom-2 start-2

top-0 end-2

z-10

z-20 on top

z-50 highest

<!-- Pin element to all edges or specific sides. -->
<div class="ui-relative ui-bg-muted" style="block-size: var(--ui-row-4)">
  <div class="ui-absolute ui-inset-0 ui-bg-subtle ui-p-2">inset-0 fills parent</div>
</div>
<div class="ui-relative ui-bg-muted" style="block-size: var(--ui-row-4)">
  <div class="ui-absolute ui-inset-block-0 ui-start-0 ui-bg-subtle ui-p-2">inset-block-0 + start-0</div>
</div>

<!-- @inset-scale | row -->
<!-- Offset from edges using space tokens (1-4). -->
<div class="ui-relative ui-bg-muted" style="block-size: var(--ui-row-4)">
  <div class="ui-absolute ui-top-1 ui-end-1 ui-bg-subtle ui-p-1">top-1 end-1</div>
  <div class="ui-absolute ui-bottom-2 ui-start-2 ui-bg-subtle ui-p-1">bottom-2 start-2</div>
</div>
<div class="ui-relative ui-bg-muted" style="block-size: var(--ui-row-4)">
  <div class="ui-absolute ui-top-0 ui-end-2 ui-bg-subtle ui-p-1">top-0 end-2</div>
</div>

<!-- @z-index | row -->
<!-- Control stacking order. Scale: 0, 10, 20, 30, 40, 50. -->
<div class="ui-relative ui-bg-muted" style="block-size: var(--ui-row-4)">
  <div class="ui-absolute ui-top-1 ui-start-1 ui-z-10 ui-bg-subtle ui-p-1">z-10</div>
  <div class="ui-absolute ui-top-2 ui-start-2 ui-z-20 ui-bg ui-p-1 ui-rounded">z-20 on top</div>
  <div class="ui-absolute ui-top-3 ui-start-3 ui-z-50 ui-bg-subtle ui-p-1 ui-rounded">z-50 highest</div>
</div>

Overflow

This content is clipped when it overflows the container boundary. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt.

This content gets a scrollbar when it overflows. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore.

<!-- Control overflow behavior. -->
<div class="ui-overflow-hidden ui-bg-muted ui-p-2" style="block-size: var(--ui-row-3)">
  <p>This content is clipped when it overflows the container boundary. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt.</p>
</div>
<div class="ui-overflow-auto ui-bg-muted ui-p-2" style="block-size: var(--ui-row-3)">
  <p>This content gets a scrollbar when it overflows. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore.</p>
</div>