Position

Position utilities set the position type and the offsets that place an element: top, right, bottom, left, the logical inset-inline-start and inset-inline-end, and the inset shorthand. Offsets read the spacing scale, so a badge placed with top-2 lines up with a p-2 gutter.

How position works

Type. static, relative, absolute, fixed and sticky set position. absolute-center places and centres in one class.
Offsets. top-4, start-4 and inset-4 use spacing keys and output var(--nu-space-4). Keys with a p suffix are percentages: top-50p is top: 50%.
Logical offsets. start-* and end-* set inset-inline-start and inset-inline-end, which swap in right-to-left layouts.

Part	Property	Examples
`top`, `right`, `bottom`, `left`	Physical offsets	`top-0`, `left-4`
`start`, `end`	`inset-inline-start`, `inset-inline-end` (logical)	`start-2`, `end-0`
`inset`	All four sides	`inset-0`
`inset-x`, `inset-y`	`left` and `right`, `top` and `bottom` (physical)	`inset-x-4`, `inset-y-0`

inset-x sets the physical left and right, unlike px and mx, which are logical. With one value on both sides the result is the same in both directions.

Position type

Class	Declaration	Use
`static`	`position: static`	Back to normal flow, for example to undo a positioned state at a breakpoint
`relative`	`position: relative`	A positioning context for absolute children, or a small nudge with offsets
`absolute`	`position: absolute`	Taken out of flow, placed against the nearest positioned ancestor
`fixed`	`position: fixed`	Placed against the viewport and stays there while the page scrolls
`sticky`	`position: sticky`, plus default `top: 0` and `z-index: 999`	Scrolls with the page until it reaches its offset, then sticks

Absolute children inside a relative parent

top-2 start-2

bottom-2 end-2

HTML
SCSS

<div class="relative h-32 bg-alternate rounded">
  <div class="absolute top-2 start-2 p-2 bg-surface border rounded">top-2 start-2</div>
  <div class="absolute bottom-2 end-2 p-2 bg-surface border rounded">bottom-2 end-2</div>
</div>

.panel {
  @include apply(relative);
}
.panel__badge {
  @include apply(absolute, top(2), inset-start(2));
}

fixed places an element against the viewport, so it is not shown live here:

<header class="fixed top-0 inset-x-0 z-fixed p-4 bg-surface">Site header</header>

Sticky

sticky keeps an element in view once it reaches the top of its scrolling container. The class sets position: sticky at normal specificity and puts its defaults, top: 0 and z-index: 999, inside :where(), which has zero specificity:

.sticky {
  position: sticky;
}
:where(.sticky) {
  top: 0;
  z-index: 999;
}

So any offset or z-index class on the same element wins, whatever its order in the stylesheet: sticky top-4 sticks 1rem from the top, and sticky z-sticky uses the --nu-z-sticky level instead of 999.

sticky: scroll this box

Row 1

Row 2

Row 3

Row 4

Row 5

Row 6

Row 7

Row 8

HTML
SCSS

<div class="relative z-0 h-40 overflow-y-auto border rounded">
  <div class="sticky p-2 bg-brand text-on-brand">sticky: scroll this box</div>
  <div class="p-2">Row 1</div>
  <div class="p-2">Row 2</div>
  <div class="p-2">Row 3</div>
  <div class="p-2">Row 4</div>
  <div class="p-2">Row 5</div>
  <div class="p-2">Row 6</div>
  <div class="p-2">Row 7</div>
  <div class="p-2">Row 8</div>
</div>

.table-header {
  @include apply(sticky);
}

The sticky mixin emits the same three declarations at normal specificity (position: sticky; z-index: 999; top: 0). Add top() or z-index() after it in the same rule to change them.

A sticky element sticks only inside its scrolling ancestor, and stops sticking when its parent scrolls out of view. An ancestor with overflow: hidden creates a scrolling container and can stop it sticking to the page.

Offsets

Offset classes use every spacing key and the percentage keys 25p, 33p, 50p, 66p, 75p and 100p. Here 33p is 33.333% and 66p is 66.667%.

Key	Token	Value	Pixels
`0`	`--nu-space-0`	`0`	0px
`1`	`--nu-space-1`	`0.25rem`	4px
`2`	`--nu-space-2`	`0.5rem`	8px
`3`	`--nu-space-3`	`0.75rem`	12px
`4`	`--nu-space-4`	`1rem`	16px
`5`	`--nu-space-5`	`1.25rem`	20px
`6`	`--nu-space-6`	`1.5rem`	24px
`8`	`--nu-space-8`	`2rem`	32px
`10`	`--nu-space-10`	`2.5rem`	40px
`12`	`--nu-space-12`	`3rem`	48px
`16`	`--nu-space-16`	`4rem`	64px
`20`	`--nu-space-20`	`5rem`	80px
`24`	`--nu-space-24`	`6rem`	96px
`32`	`--nu-space-32`	`8rem`	128px
`40`	`--nu-space-40`	`10rem`	160px
`48`	`--nu-space-48`	`12rem`	192px
`56`	`--nu-space-56`	`14rem`	224px
`64`	`--nu-space-64`	`16rem`	256px

top-0 left-0

top-50p left-50p

bottom-0 right-0

<div class="relative h-40 bg-alternate rounded">
  <div class="absolute top-0 left-0 p-2 bg-surface border rounded">top-0 left-0</div>
  <div class="absolute top-50p left-50p p-2 bg-surface border rounded">top-50p left-50p</div>
  <div class="absolute bottom-0 right-0 p-2 bg-surface border rounded">bottom-0 right-0</div>
</div>

top-50p left-50p places the element’s top left corner at the centre. To centre the element itself, use absolute-center.

Logical offsets

The same markup is rendered left to right and right to left. end-2 moves to the other side; right-2 stays on the right.

LTR

end-2

right-2

RTL

end-2

right-2

HTML
SCSS

<div class="space-y-2">
  <div class="relative h-12 bg-alternate rounded">
    <span class="absolute top-2 end-2 px-2 bg-brand text-on-brand rounded">end-2</span>
  </div>
  <div class="relative h-12 bg-alternate rounded">
    <span class="absolute top-2 right-2 px-2 bg-surface border rounded">right-2</span>
  </div>
</div>

.close-button {
  @include apply(absolute, top(2), inset-end(2));
}

Negative offsets

There are no negative offset classes. Use a negative key in a mixin: offset and inset mixins accept it and output calc(-1 * var(--nu-space-{key})).

.badge {
  @include apply(absolute, top(-2), inset-end(-2));
}

.badge {
  position: absolute;
  top: calc(-1 * var(--nu-space-2));
  inset-inline-end: calc(-1 * var(--nu-space-2));
}

Inset

inset-* sets all four sides at once; inset-x-* sets left and right, inset-y-* top and bottom. inset-0 on an absolute child covers its positioned parent. inset-auto, inset-x-auto and inset-y-auto reset the sides to auto.

absolute inset-4

HTML
SCSS

<div class="relative h-32 bg-alternate rounded">
  <div class="absolute inset-4 p-2 bg-brand-subtle border border-brand rounded">absolute inset-4</div>
</div>

.overlay {
  @include apply(absolute, inset(0));
}

Inset classes come before the side classes in the stylesheet, so a side class adjusts an inset: inset-0 top-4 covers the parent except for 1rem at the top. Inset classes take spacing keys and auto; there are no percentage inset classes.

Absolute centre

absolute-center sets position: absolute, top: 50%, left: 50% and a -50% translate on both axes, so the element’s centre sits at the centre of its positioned parent.

absolute-center

HTML
SCSS

<div class="relative h-32 bg-alternate rounded">
  <div class="absolute-center p-2 bg-surface border rounded">absolute-center</div>
</div>

.spinner {
  @include apply(absolute-center);
}

The translate goes through the transform custom properties (--nu-translate-x, --nu-translate-y), so rotate, scale and skew utilities on the same element combine with it instead of replacing it. Because it uses physical left, the centring is the same in both directions.

Responsive variants

Every position class has a responsive variant with an @{breakpoint} suffix: type (relative@md, sticky@lg), absolute-center@md, offsets (top-4@md, start-50p@lg) and insets (inset-0@md, inset-x-auto@lg). A variant applies from its breakpoint upwards.

static, absolute from md

HTML
SCSS

<div class="relative h-32 bg-alternate rounded">
  <div class="static absolute@md top-2@md end-2@md p-2 bg-surface border rounded">static, absolute from md</div>
</div>

.badge {
  @include apply(static, absolute md, top(2) md, inset-end(2) md);
}

Responsive inset classes come after every non-responsive position class, so inset-0@md overrides top-4. sticky@{breakpoint} keeps its defaults inside :where() too.

Suffix	Media query
`@xs`	`@media (min-width: 480px)`
`@sm`	`@media (min-width: 640px)`
`@md`	`@media (min-width: 768px)`
`@lg`	`@media (min-width: 1024px)`
`@xl`	`@media (min-width: 1280px)`
`@2xl`	`@media (min-width: 1536px)`

Position has no state variants.

SCSS

@use "@nuvoui/core" as *;

.toast {
  @include apply(fixed, bottom(4), inset-end(4), z-index(toast));
}

.toast {
  position: fixed;
  bottom: var(--nu-space-4);
  inset-inline-end: var(--nu-space-4);
  z-index: var(--nu-z-toast);
}

Mixin	Class
`static`, `relative`, `absolute`, `fixed`, `sticky`	Same name
`top()`, `right()`, `bottom()`, `left()`	`top-`, `right-`, `bottom-`, `left-`
`inset-start()`, `inset-end()`	`start-`, `end-`
`inset()`, `inset-x()`, `inset-y()`	`inset-`, `inset-x-`, `inset-y-*`
`inset-auto`, `inset-x-auto`, `inset-y-auto`	Same name
`absolute-center`	Same name

The logical offset mixins are named inset-start() and inset-end() because start and end are flex alignment mixins.

Keys and custom values

A unitless number is a spacing key and may be negative. A value with a unit is used as written, and auto, calc(), var() and the CSS-wide keywords pass through. For a percentage, write the %: the 25p style keys are class names only.

.tooltip {
  @include apply(absolute, top(100%), left(50%), mt(2));
}

Tokens in your own CSS

.drawer {
  position: fixed;
  inset-block: 0;
  inset-inline-end: token(space-0);
  width: token(space-64);
}

Configuration

Offset and inset classes follow $spacings: adding a key adds top-{key}, inset-{key} and the rest. The percentage keys are fixed. See Spacing configuration.

@use "@nuvoui/core" with (
  $generate-utility-classes: true,
  $spacings: (0: 0, 1: 0.25rem, 2: 0.5rem, 3: 0.75rem, 4: 1rem, 6: 1.5rem, 8: 2rem, 12: 3rem, 16: 4rem)
);

Errors

Input	Error
`top(7)`	`top: 7 is not a configured key. Valid keys: 0, 1, 2, 3, 4, 5, 6, 8, 10, 12, 16, 20, 24, 32, 40, 48, 56, 64. Write a unit for a custom value (7px, 7rem).`
`top(foo)`	`top: unknown value foo. Use a key (0, 1, 2, 3, 4, 5, 6, 8, 10, 12, 16, 20, 24, 32, 40, 48, 56, 64), a value with a CSS unit, calc(), var() or a keyword (auto, inherit, initial, unset, revert, revert-layer).`

Negative keys and negative lengths are accepted by every offset and inset mixin.

CSS variables

Variable	Description
`--nu-space-{key}`	Used by offset and inset classes and mixins.

absolute-center sets the internal properties --nu-translate-x and --nu-translate-y. They are not tokens.

Class reference

Generated from the compiled core build. Responsive variants are not listed. The :where(.sticky) rule with the sticky defaults is shown in Sticky.

Position type (6 rules)

Selector	Declarations	Default value
`.static`	`position: static`	`static`
`.relative`	`position: relative`	`relative`
`.absolute`	`position: absolute`	`absolute`
`.fixed`	`position: fixed`	`fixed`
`.sticky`	`position: sticky`	`sticky`
`.absolute-center`	`position: absolute` `left: 50%` `top: 50%` `transform: translateX(var(--nu-translate-x)) translateY(var(--nu-translate-y)) translateZ(var(--nu-translate-z)) rotate(var(--nu-rotate)) skewX(var(--nu-skew-x)) skewY(var(--nu-skew-y)) scaleX(var(--nu-scale-x)) scaleY(var(--nu-scale-y))`	`absolute` `50%` `50%` `translateX(var(--nu-translate-x)) translateY(var(--nu-translate-y)) translateZ(var(--nu-translate-z)) rotate(var(--nu-rotate)) skewX(var(--nu-skew-x)) skewY(var(--nu-skew-y)) scaleX(var(--nu-scale-x)) scaleY(var(--nu-scale-y))`

Inset (57 rules)

Selector	Declarations	Default value
`.inset-auto`	`inset: auto`	`auto`
`.inset-x-auto`	`left: auto` `right: auto`	`auto` `auto`
`.inset-y-auto`	`top: auto` `bottom: auto`	`auto` `auto`
`.inset-0`	`inset: var(--nu-space-0)`	`0`
`.inset-x-0`	`left: var(--nu-space-0)` `right: var(--nu-space-0)`	`0` `0`
`.inset-y-0`	`top: var(--nu-space-0)` `bottom: var(--nu-space-0)`	`0` `0`
`.inset-1`	`inset: var(--nu-space-1)`	`0.25rem`
`.inset-x-1`	`left: var(--nu-space-1)` `right: var(--nu-space-1)`	`0.25rem` `0.25rem`
`.inset-y-1`	`top: var(--nu-space-1)` `bottom: var(--nu-space-1)`	`0.25rem` `0.25rem`
`.inset-2`	`inset: var(--nu-space-2)`	`0.5rem`
`.inset-x-2`	`left: var(--nu-space-2)` `right: var(--nu-space-2)`	`0.5rem` `0.5rem`
`.inset-y-2`	`top: var(--nu-space-2)` `bottom: var(--nu-space-2)`	`0.5rem` `0.5rem`
`.inset-3`	`inset: var(--nu-space-3)`	`0.75rem`
`.inset-x-3`	`left: var(--nu-space-3)` `right: var(--nu-space-3)`	`0.75rem` `0.75rem`
`.inset-y-3`	`top: var(--nu-space-3)` `bottom: var(--nu-space-3)`	`0.75rem` `0.75rem`
`.inset-4`	`inset: var(--nu-space-4)`	`1rem`
`.inset-x-4`	`left: var(--nu-space-4)` `right: var(--nu-space-4)`	`1rem` `1rem`
`.inset-y-4`	`top: var(--nu-space-4)` `bottom: var(--nu-space-4)`	`1rem` `1rem`
`.inset-5`	`inset: var(--nu-space-5)`	`1.25rem`
`.inset-x-5`	`left: var(--nu-space-5)` `right: var(--nu-space-5)`	`1.25rem` `1.25rem`
`.inset-y-5`	`top: var(--nu-space-5)` `bottom: var(--nu-space-5)`	`1.25rem` `1.25rem`
`.inset-6`	`inset: var(--nu-space-6)`	`1.5rem`
`.inset-x-6`	`left: var(--nu-space-6)` `right: var(--nu-space-6)`	`1.5rem` `1.5rem`
`.inset-y-6`	`top: var(--nu-space-6)` `bottom: var(--nu-space-6)`	`1.5rem` `1.5rem`
`.inset-8`	`inset: var(--nu-space-8)`	`2rem`
`.inset-x-8`	`left: var(--nu-space-8)` `right: var(--nu-space-8)`	`2rem` `2rem`
`.inset-y-8`	`top: var(--nu-space-8)` `bottom: var(--nu-space-8)`	`2rem` `2rem`
`.inset-10`	`inset: var(--nu-space-10)`	`2.5rem`
`.inset-x-10`	`left: var(--nu-space-10)` `right: var(--nu-space-10)`	`2.5rem` `2.5rem`
`.inset-y-10`	`top: var(--nu-space-10)` `bottom: var(--nu-space-10)`	`2.5rem` `2.5rem`
`.inset-12`	`inset: var(--nu-space-12)`	`3rem`
`.inset-x-12`	`left: var(--nu-space-12)` `right: var(--nu-space-12)`	`3rem` `3rem`
`.inset-y-12`	`top: var(--nu-space-12)` `bottom: var(--nu-space-12)`	`3rem` `3rem`
`.inset-16`	`inset: var(--nu-space-16)`	`4rem`
`.inset-x-16`	`left: var(--nu-space-16)` `right: var(--nu-space-16)`	`4rem` `4rem`
`.inset-y-16`	`top: var(--nu-space-16)` `bottom: var(--nu-space-16)`	`4rem` `4rem`
`.inset-20`	`inset: var(--nu-space-20)`	`5rem`
`.inset-x-20`	`left: var(--nu-space-20)` `right: var(--nu-space-20)`	`5rem` `5rem`
`.inset-y-20`	`top: var(--nu-space-20)` `bottom: var(--nu-space-20)`	`5rem` `5rem`
`.inset-24`	`inset: var(--nu-space-24)`	`6rem`
`.inset-x-24`	`left: var(--nu-space-24)` `right: var(--nu-space-24)`	`6rem` `6rem`
`.inset-y-24`	`top: var(--nu-space-24)` `bottom: var(--nu-space-24)`	`6rem` `6rem`
`.inset-32`	`inset: var(--nu-space-32)`	`8rem`
`.inset-x-32`	`left: var(--nu-space-32)` `right: var(--nu-space-32)`	`8rem` `8rem`
`.inset-y-32`	`top: var(--nu-space-32)` `bottom: var(--nu-space-32)`	`8rem` `8rem`
`.inset-40`	`inset: var(--nu-space-40)`	`10rem`
`.inset-x-40`	`left: var(--nu-space-40)` `right: var(--nu-space-40)`	`10rem` `10rem`
`.inset-y-40`	`top: var(--nu-space-40)` `bottom: var(--nu-space-40)`	`10rem` `10rem`
`.inset-48`	`inset: var(--nu-space-48)`	`12rem`
`.inset-x-48`	`left: var(--nu-space-48)` `right: var(--nu-space-48)`	`12rem` `12rem`
`.inset-y-48`	`top: var(--nu-space-48)` `bottom: var(--nu-space-48)`	`12rem` `12rem`
`.inset-56`	`inset: var(--nu-space-56)`	`14rem`
`.inset-x-56`	`left: var(--nu-space-56)` `right: var(--nu-space-56)`	`14rem` `14rem`
`.inset-y-56`	`top: var(--nu-space-56)` `bottom: var(--nu-space-56)`	`14rem` `14rem`
`.inset-64`	`inset: var(--nu-space-64)`	`16rem`
`.inset-x-64`	`left: var(--nu-space-64)` `right: var(--nu-space-64)`	`16rem` `16rem`
`.inset-y-64`	`top: var(--nu-space-64)` `bottom: var(--nu-space-64)`	`16rem` `16rem`

Physical offsets (96 rules)

Selector	Declarations	Default value
`.top-25p`	`top: 25%`	`25%`
`.right-25p`	`right: 25%`	`25%`
`.bottom-25p`	`bottom: 25%`	`25%`
`.left-25p`	`left: 25%`	`25%`
`.top-33p`	`top: 33.333%`	`33.333%`
`.right-33p`	`right: 33.333%`	`33.333%`
`.bottom-33p`	`bottom: 33.333%`	`33.333%`
`.left-33p`	`left: 33.333%`	`33.333%`
`.top-50p`	`top: 50%`	`50%`
`.right-50p`	`right: 50%`	`50%`
`.bottom-50p`	`bottom: 50%`	`50%`
`.left-50p`	`left: 50%`	`50%`
`.top-66p`	`top: 66.667%`	`66.667%`
`.right-66p`	`right: 66.667%`	`66.667%`
`.bottom-66p`	`bottom: 66.667%`	`66.667%`
`.left-66p`	`left: 66.667%`	`66.667%`
`.top-75p`	`top: 75%`	`75%`
`.right-75p`	`right: 75%`	`75%`
`.bottom-75p`	`bottom: 75%`	`75%`
`.left-75p`	`left: 75%`	`75%`
`.top-100p`	`top: 100%`	`100%`
`.right-100p`	`right: 100%`	`100%`
`.bottom-100p`	`bottom: 100%`	`100%`
`.left-100p`	`left: 100%`	`100%`
`.top-0`	`top: var(--nu-space-0)`	`0`
`.right-0`	`right: var(--nu-space-0)`	`0`
`.bottom-0`	`bottom: var(--nu-space-0)`	`0`
`.left-0`	`left: var(--nu-space-0)`	`0`
`.top-1`	`top: var(--nu-space-1)`	`0.25rem`
`.right-1`	`right: var(--nu-space-1)`	`0.25rem`
`.bottom-1`	`bottom: var(--nu-space-1)`	`0.25rem`
`.left-1`	`left: var(--nu-space-1)`	`0.25rem`
`.top-2`	`top: var(--nu-space-2)`	`0.5rem`
`.right-2`	`right: var(--nu-space-2)`	`0.5rem`
`.bottom-2`	`bottom: var(--nu-space-2)`	`0.5rem`
`.left-2`	`left: var(--nu-space-2)`	`0.5rem`
`.top-3`	`top: var(--nu-space-3)`	`0.75rem`
`.right-3`	`right: var(--nu-space-3)`	`0.75rem`
`.bottom-3`	`bottom: var(--nu-space-3)`	`0.75rem`
`.left-3`	`left: var(--nu-space-3)`	`0.75rem`
`.top-4`	`top: var(--nu-space-4)`	`1rem`
`.right-4`	`right: var(--nu-space-4)`	`1rem`
`.bottom-4`	`bottom: var(--nu-space-4)`	`1rem`
`.left-4`	`left: var(--nu-space-4)`	`1rem`
`.top-5`	`top: var(--nu-space-5)`	`1.25rem`
`.right-5`	`right: var(--nu-space-5)`	`1.25rem`
`.bottom-5`	`bottom: var(--nu-space-5)`	`1.25rem`
`.left-5`	`left: var(--nu-space-5)`	`1.25rem`
`.top-6`	`top: var(--nu-space-6)`	`1.5rem`
`.right-6`	`right: var(--nu-space-6)`	`1.5rem`
`.bottom-6`	`bottom: var(--nu-space-6)`	`1.5rem`
`.left-6`	`left: var(--nu-space-6)`	`1.5rem`
`.top-8`	`top: var(--nu-space-8)`	`2rem`
`.right-8`	`right: var(--nu-space-8)`	`2rem`
`.bottom-8`	`bottom: var(--nu-space-8)`	`2rem`
`.left-8`	`left: var(--nu-space-8)`	`2rem`
`.top-10`	`top: var(--nu-space-10)`	`2.5rem`
`.right-10`	`right: var(--nu-space-10)`	`2.5rem`
`.bottom-10`	`bottom: var(--nu-space-10)`	`2.5rem`
`.left-10`	`left: var(--nu-space-10)`	`2.5rem`
`.top-12`	`top: var(--nu-space-12)`	`3rem`
`.right-12`	`right: var(--nu-space-12)`	`3rem`
`.bottom-12`	`bottom: var(--nu-space-12)`	`3rem`
`.left-12`	`left: var(--nu-space-12)`	`3rem`
`.top-16`	`top: var(--nu-space-16)`	`4rem`
`.right-16`	`right: var(--nu-space-16)`	`4rem`
`.bottom-16`	`bottom: var(--nu-space-16)`	`4rem`
`.left-16`	`left: var(--nu-space-16)`	`4rem`
`.top-20`	`top: var(--nu-space-20)`	`5rem`
`.right-20`	`right: var(--nu-space-20)`	`5rem`
`.bottom-20`	`bottom: var(--nu-space-20)`	`5rem`
`.left-20`	`left: var(--nu-space-20)`	`5rem`
`.top-24`	`top: var(--nu-space-24)`	`6rem`
`.right-24`	`right: var(--nu-space-24)`	`6rem`
`.bottom-24`	`bottom: var(--nu-space-24)`	`6rem`
`.left-24`	`left: var(--nu-space-24)`	`6rem`
`.top-32`	`top: var(--nu-space-32)`	`8rem`
`.right-32`	`right: var(--nu-space-32)`	`8rem`
`.bottom-32`	`bottom: var(--nu-space-32)`	`8rem`
`.left-32`	`left: var(--nu-space-32)`	`8rem`
`.top-40`	`top: var(--nu-space-40)`	`10rem`
`.right-40`	`right: var(--nu-space-40)`	`10rem`
`.bottom-40`	`bottom: var(--nu-space-40)`	`10rem`
`.left-40`	`left: var(--nu-space-40)`	`10rem`
`.top-48`	`top: var(--nu-space-48)`	`12rem`
`.right-48`	`right: var(--nu-space-48)`	`12rem`
`.bottom-48`	`bottom: var(--nu-space-48)`	`12rem`
`.left-48`	`left: var(--nu-space-48)`	`12rem`
`.top-56`	`top: var(--nu-space-56)`	`14rem`
`.right-56`	`right: var(--nu-space-56)`	`14rem`
`.bottom-56`	`bottom: var(--nu-space-56)`	`14rem`
`.left-56`	`left: var(--nu-space-56)`	`14rem`
`.top-64`	`top: var(--nu-space-64)`	`16rem`
`.right-64`	`right: var(--nu-space-64)`	`16rem`
`.bottom-64`	`bottom: var(--nu-space-64)`	`16rem`
`.left-64`	`left: var(--nu-space-64)`	`16rem`

Logical offsets (48 rules)

Selector	Declarations	Default value
`.start-25p`	`inset-inline-start: 25%`	`25%`
`.end-25p`	`inset-inline-end: 25%`	`25%`
`.start-33p`	`inset-inline-start: 33.333%`	`33.333%`
`.end-33p`	`inset-inline-end: 33.333%`	`33.333%`
`.start-50p`	`inset-inline-start: 50%`	`50%`
`.end-50p`	`inset-inline-end: 50%`	`50%`
`.start-66p`	`inset-inline-start: 66.667%`	`66.667%`
`.end-66p`	`inset-inline-end: 66.667%`	`66.667%`
`.start-75p`	`inset-inline-start: 75%`	`75%`
`.end-75p`	`inset-inline-end: 75%`	`75%`
`.start-100p`	`inset-inline-start: 100%`	`100%`
`.end-100p`	`inset-inline-end: 100%`	`100%`
`.start-0`	`inset-inline-start: var(--nu-space-0)`	`0`
`.end-0`	`inset-inline-end: var(--nu-space-0)`	`0`
`.start-1`	`inset-inline-start: var(--nu-space-1)`	`0.25rem`
`.end-1`	`inset-inline-end: var(--nu-space-1)`	`0.25rem`
`.start-2`	`inset-inline-start: var(--nu-space-2)`	`0.5rem`
`.end-2`	`inset-inline-end: var(--nu-space-2)`	`0.5rem`
`.start-3`	`inset-inline-start: var(--nu-space-3)`	`0.75rem`
`.end-3`	`inset-inline-end: var(--nu-space-3)`	`0.75rem`
`.start-4`	`inset-inline-start: var(--nu-space-4)`	`1rem`
`.end-4`	`inset-inline-end: var(--nu-space-4)`	`1rem`
`.start-5`	`inset-inline-start: var(--nu-space-5)`	`1.25rem`
`.end-5`	`inset-inline-end: var(--nu-space-5)`	`1.25rem`
`.start-6`	`inset-inline-start: var(--nu-space-6)`	`1.5rem`
`.end-6`	`inset-inline-end: var(--nu-space-6)`	`1.5rem`
`.start-8`	`inset-inline-start: var(--nu-space-8)`	`2rem`
`.end-8`	`inset-inline-end: var(--nu-space-8)`	`2rem`
`.start-10`	`inset-inline-start: var(--nu-space-10)`	`2.5rem`
`.end-10`	`inset-inline-end: var(--nu-space-10)`	`2.5rem`
`.start-12`	`inset-inline-start: var(--nu-space-12)`	`3rem`
`.end-12`	`inset-inline-end: var(--nu-space-12)`	`3rem`
`.start-16`	`inset-inline-start: var(--nu-space-16)`	`4rem`
`.end-16`	`inset-inline-end: var(--nu-space-16)`	`4rem`
`.start-20`	`inset-inline-start: var(--nu-space-20)`	`5rem`
`.end-20`	`inset-inline-end: var(--nu-space-20)`	`5rem`
`.start-24`	`inset-inline-start: var(--nu-space-24)`	`6rem`
`.end-24`	`inset-inline-end: var(--nu-space-24)`	`6rem`
`.start-32`	`inset-inline-start: var(--nu-space-32)`	`8rem`
`.end-32`	`inset-inline-end: var(--nu-space-32)`	`8rem`
`.start-40`	`inset-inline-start: var(--nu-space-40)`	`10rem`
`.end-40`	`inset-inline-end: var(--nu-space-40)`	`10rem`
`.start-48`	`inset-inline-start: var(--nu-space-48)`	`12rem`
`.end-48`	`inset-inline-end: var(--nu-space-48)`	`12rem`
`.start-56`	`inset-inline-start: var(--nu-space-56)`	`14rem`
`.end-56`	`inset-inline-end: var(--nu-space-56)`	`14rem`
`.start-64`	`inset-inline-start: var(--nu-space-64)`	`16rem`
`.end-64`	`inset-inline-end: var(--nu-space-64)`	`16rem`

Accessibility and RTL

Mirror with logical offsets. Use start-* and end-* for close buttons, badges and anything placed on a side that should follow the reading direction.
Keep visual and source order aligned. Positioning moves elements visually but not in the reading and focus order. Place elements in the source where they make sense to keyboard and screen reader users (WCAG 1.3.2 Meaningful Sequence, 2.4.3 Focus Order).
Do not hide focused content. A sticky or fixed header can cover the element that has keyboard focus. Leave room with scroll-padding-top on the scrolling container (WCAG 2.2, 2.4.11 Focus Not Obscured).
Fixed content and zoom. Large fixed or sticky bars take up much of the screen at 400% zoom or on small landscape phones. Keep them short, or make them static at small breakpoints (static sticky@md) (WCAG 1.4.10 Reflow).