Position

Position and inset utilities for controlling element placement. Included in @grundtone/design-tokens CSS — see Installation for setup.

All utilities support responsive prefixes: sm:, md:, lg:, xl:, 2xl:.

---

Position values

Control element positioning with short class names:

<div class="relative p-3" style="height: 120px; background: var(--vp-c-bg-alt); border-radius: 6px;">
  <div class="absolute top-0 end-0 px-2 py-1" style="background: var(--vp-c-brand-soft); border-radius: 0 6px 0 4px; font-size: 0.75rem;">.absolute .top-0 .end-0</div>
  <div class="absolute bottom-0 start-0 px-2 py-1" style="background: var(--vp-c-brand-soft); border-radius: 0 4px 0 6px; font-size: 0.75rem;">.absolute .bottom-0 .start-0</div>
  <div class="align-text-center pt-10" style="font-size: 0.875rem; opacity: 0.7;">parent is .relative</div>
</div>

.absolute .top-0 .end-0

.absolute .bottom-0 .start-0

parent is .relative

Class	CSS
.static	position: static
.relative	position: relative
.absolute	position: absolute
.fixed	position: fixed
.sticky	position: sticky

---

Inset

Pin elements to edges of their positioned parent. Inline directions (start/end) use logical properties for RTL support:

<div class="relative" style="height: 100px; background: var(--vp-c-bg-alt); border-radius: 6px;">
  <div class="absolute inset-0 flex items-center justify-center" style="background: var(--vp-c-brand-soft); border-radius: 6px; font-size: 0.875rem;">
    .absolute .inset-0 &mdash; fills entire parent
  </div>
</div>

.absolute .inset-0 — fills entire parent

Class	CSS	Description
.inset-0	inset: 0	All edges
.inset-x-0	inset-inline: 0	Left + right (RTL-aware)
.inset-y-0	inset-block: 0	Top + bottom
.top-0	top: 0	Top edge
.bottom-0	bottom: 0	Bottom edge
.start-0	inset-inline-start: 0	Start (left in LTR)
.end-0	inset-inline-end: 0	End (right in LTR)

---

Sticky header

Create a header that stays visible while scrolling, layered above content with z-index:

<div style="height: 120px; overflow-y: auto; background: var(--vp-c-bg-alt); border-radius: 6px;">
  <div class="sticky top-0 z-sticky px-3 py-2" style="background: var(--vp-c-brand-soft); font-size: 0.75rem; border-bottom: 1px solid var(--vp-c-divider);">.sticky .top-0 .z-sticky &mdash; scroll down &darr;</div>
  <div class="px-3 py-2" style="font-size: 0.75rem;">Item 1</div>
  <div class="px-3 py-2" style="font-size: 0.75rem;">Item 2</div>
  <div class="px-3 py-2" style="font-size: 0.75rem;">Item 3</div>
  <div class="px-3 py-2" style="font-size: 0.75rem;">Item 4</div>
  <div class="px-3 py-2" style="font-size: 0.75rem;">Item 5</div>
  <div class="px-3 py-2" style="font-size: 0.75rem;">Item 6</div>
  <div class="px-3 py-2" style="font-size: 0.75rem;">Item 7</div>
  <div class="px-3 py-2" style="font-size: 0.75rem;">Item 8</div>
</div>

.sticky .top-0 .z-sticky — scroll down ↓

Item 1

Item 2

Item 3

Item 4

Item 5

Item 6

Item 7

Item 8

<header class="sticky top-0 z-sticky">Navigation</header>

---

Position shortcuts

Pre-composed classes for common fixed/sticky patterns. Z-index values use CSS custom properties from the z-index token system:

Class	Position	Edges	Z-index
.fixed-top	fixed	top: 0 + inset-inline: 0	var(--z-fixed)
.fixed-bottom	fixed	bottom: 0 + inset-inline: 0	var(--z-fixed)
.sticky-top	sticky	top: 0	var(--z-sticky)

---

Responsive

Change position at different breakpoints:

<!-- Static on mobile, sticky from md -->
<nav class="static md:sticky md:top-0 md:z-sticky">...</nav>

<!-- Absolute on mobile, fixed from lg -->
<div class="absolute lg:fixed lg:inset-x-0 lg:bottom-0">...</div>

---

Comparison with Bootstrap

Feature	Bootstrap 5	Grundtone
Position naming	.position-relative	.relative
Inset utilities	.top-0, .start-0	Same + .inset-0, .inset-x-0
RTL support	.start-0 / .end-0	Same (logical properties)
!important	On every utility	None
Responsive	.position-md-sticky	.md:sticky
Shortcuts z-index	Hardcoded values	CSS custom properties