Inset

Use inset utilities to control the position of absolute, fixed, or sticky elements relative to their containing block. Classes cover all four physical edges (top, right, bottom, left), logical inline edges (start, end), and the shorthand inset property for all sides at once.

All inset utilities are pure CSS and do not require the FrontAlign runtime.

Quick reference

Class	Styles	Use case
`top-0`	`top: 0`	Pin element to the top edge.
`top-full`	`top: 100%`	Offset element fully below its parent.
`-top-full`	`top: -100%`	Pull element fully above its parent.
`bottom-0`	`bottom: 0`	Pin element to the bottom edge.
`bottom-full`	`bottom: 100%`	Offset element fully above its parent.
`-bottom-full`	`bottom: -100%`	Pull element fully below its parent.
`left-0`	`left: 0`	Pin element to the left edge.
`left-full`	`left: 100%`	Offset element fully to the right of its parent.
`-left-full`	`left: -100%`	Pull element fully to the left of its parent.
`right-0`	`right: 0`	Pin element to the right edge.
`right-full`	`right: 100%`	Offset element fully to the left of its parent.
`-right-full`	`right: -100%`	Pull element fully to the right of its parent.
`start-0`	`inset-inline-start: 0`	Pin to the logical inline-start edge (RTL-aware).
`start-full`	`inset-inline-start: 100%`	Offset to the full logical inline-start extent.
`-start-full`	`inset-inline-start: -100%`	Pull back by full logical inline-start size.
`end-0`	`inset-inline-end: 0`	Pin to the logical inline-end edge (RTL-aware).
`end-full`	`inset-inline-end: 100%`	Offset to the full logical inline-end extent.
`-end-full`	`inset-inline-end: -100%`	Pull back by full logical inline-end size.
`inset-0`	`inset: 0`	Pin element to all four edges of its parent.
`inset-full`	`inset: 100%`	Push element fully outside its parent on all sides.
`-inset-full`	`inset: -100%`	Pull element fully inside from all sides.

is-relative

top-0top: 0

top-0 pins the element to its top edge

Usage

Apply inset utilities on elements with is-absolute, is-fixed, or is-sticky. Physical classes target fixed directions; logical classes (start-*, end-*) adapt to writing direction and are preferred in RTL-aware or multilingual projects.

<!-- Pin to each physical edge -->
<div class="top-0">…</div>
<div class="bottom-0">…</div>
<div class="left-0">…</div>
<div class="right-0">…</div>

<!-- Cover parent entirely -->
<div class="inset-0">…</div>

<!-- Logical inline edges (RTL-aware) -->
<div class="start-0">…</div>
<div class="end-0">…</div>

<!-- Offset outside the parent -->
<div class="top-full">…</div>
<div class="left-full">…</div>

<!-- Pull back by full size -->
<div class="-top-full">…</div>
<div class="-start-full">…</div>

Physical block positioning

Pin or offset an element along the vertical (block) axis using top-* and bottom-*.

<div class="top-0">Pinned to top</div>
<div class="top-full">Below parent</div>
<div class="-top-full">Above parent</div>

<div class="bottom-0">Pinned to bottom</div>
<div class="bottom-full">Above parent</div>
<div class="-bottom-full">Below parent</div>

Physical inline positioning

Pin or offset an element along the horizontal (inline) axis using left-* and right-*.

<div class="left-0">Pinned to left</div>
<div class="left-full">Right of parent</div>
<div class="-left-full">Left of parent</div>

<div class="right-0">Pinned to right</div>
<div class="right-full">Left of parent</div>
<div class="-right-full">Right of parent</div>

Logical inline positioning

Use start-* and end-* for RTL-aware layouts. These map to inset-inline-start and inset-inline-end and automatically flip in right-to-left contexts.

<div class="start-0">Inline-start edge</div>
<div class="start-full">Outside inline-start</div>
<div class="-start-full">Pull back inline-start</div>

<div class="end-0">Inline-end edge</div>
<div class="end-full">Outside inline-end</div>
<div class="-end-full">Pull back inline-end</div>

Inset shorthand

Use inset-* to apply the same value to all four sides simultaneously.

<!-- Cover parent entirely -->
<div class="inset-0">Full cover overlay</div>

<!-- Push outside on all sides -->
<div class="inset-full">…</div>

<!-- Pull inside from all sides -->
<div class="-inset-full">…</div>

Common patterns

<!-- Dropdown positioned directly below trigger -->
<div class="is-relative">
  <button>Menu</button>
  <ul class="is-absolute top-full left-0">…</ul>
</div>

<!-- Full-screen overlay -->
<div class="is-fixed inset-0">Backdrop</div>

<!-- Sticky header -->
<header class="is-sticky top-0">Header</header>

<!-- RTL-aware flyout menu -->
<div class="is-relative">
  <button>Open</button>
  <ul class="is-absolute top-full start-0">…</ul>
</div>

Usage notes

Use inset utilities exclusively on elements with is-absolute, is-fixed, or is-sticky.
Prefer logical anchors (start-0, end-0) over physical (left-0, right-0) in RTL-aware or multilingual projects.
Use inset-0 to cover the parent entirely — common for overlays and backdrops.
Use top-full or bottom-full to position dropdowns or tooltips just outside their trigger element.
Use -top-full, -left-full, -start-full and similar negative classes to pull an element back by its own full size — useful for off-screen slide-in effects.
Do not use inset utilities to create layout structure. Use Flexbox, Grid, and gap utilities for that purpose.