Position

Position utilities control CSS positioning and provide a set of named placement classes for anchoring elements within a positioned container. Combine them with inset utilities to offset elements from their edges, and with z-index utilities to manage stacking order.

Custom properties

These utilities set these custom properties:

• --tng-p-inset — uniform inset offset for all sides
• --tng-p-block-inset — inset offset for top/bottom
• --tng-p-inline-inset — inset offset for left/right

When you apply any position class (.p-absolute, .p-fixed, .p-relative, or .p-sticky), both --tng-p-block-inset and --tng-p-inline-inset default to var(--tng-p-inset, 0). This means placement classes like .at-top-right automatically respect any inset you set.

Position types

Class	Sets	Notes
.p-absolute	position: absolute	Initialises the inset custom properties
.p-fixed	position: fixed	Initialises the inset custom properties
.p-relative	position: relative	Initialises the inset custom properties; creates a context for children
.p-sticky	position: sticky	Initialises the inset custom properties

Tip

Use .p-relative on the parent, then .p-absolute with a placement class on the child. This is the standard pattern for anchoring elements within a container.

Placement

Placement classes position an element within its nearest positioned ancestor. They work with all position types.

Class	Position
.at-center	Dead center of the container
.at-golden-ratio	Vertically at the golden ratio (~38.2% from top), horizontally centered
.at-maximum	Stretches to fill the entire container (100dvw × 100dvh)
.at-top	Top edge, horizontally centered
.at-right	Right edge, vertically centered
.at-bottom	Bottom edge, horizontally centered
.at-left	Left edge, vertically centered
.at-top-left	Top-left corner
.at-top-right	Top-right corner
.at-bottom-left	Bottom-left corner
.at-bottom-right	Bottom-right corner

.at-center

.at-golden-ratio

.at-maximum

.at-bottom

.at-top

.at-left

.at-right

.at-top-right

.at-bottom-right

.at-bottom-left

.at-top-left

Note

.at-golden-ratio places the element at roughly 38.2% from the top — the golden ratio point. This is a common design trick for modals and dialogs: it feels more natural than dead center because it aligns with where the eye naturally rests.

Inset

Inset utilities set the offset distance between a positioned element and the edges of its container. They modify the --tng-p-inset custom property, which is consumed by the placement classes above.

Class	Sets
.inset-none	--tng-p-inset: var(--tng-spacing-none)
.inset-2xs	--tng-p-inset: var(--tng-spacing-2xs)
.inset-xs	--tng-p-inset: var(--tng-spacing-xs)
.inset-sm	--tng-p-inset: var(--tng-spacing-sm)
.inset-md	--tng-p-inset: var(--tng-spacing-md)
.inset-lg	--tng-p-inset: var(--tng-spacing-lg)
.inset-xl	--tng-p-inset: var(--tng-spacing-xl)
.inset-2xl	--tng-p-inset: var(--tng-spacing-2xl)
…	Continues up to .inset-10xl

Inset values use the same spacing tokens as padding and gap, keeping distances consistent across the system.

.inset-none

.inset-2xs

.inset-xs

.inset-sm

.inset-md

.inset-lg

.inset-xl

.inset-2xl

.inset-3xl

.inset-4xl

.inset-5xl

.inset-6xl

.inset-7xl

.inset-8xl

.inset-9xl

.inset-10xl

<!-- Badge in the top-right corner with a small inset -->
<div class="p-relative">
  <img src="product.jpg" alt="Product" />
  <span class="tng-badge | p-absolute at-top-right inset-sm">New</span>
</div>

When to use

Pattern	Classes
Overlay centered in viewport	.p-fixed .at-center .z-overlay
Badge on an image corner	.p-absolute .at-top-right .inset-sm
Sticky header	.p-sticky .at-top .z-sticky
Full-screen backdrop	.p-fixed .at-maximum .z-overlay
Golden-ratio dialog	.p-fixed .at-golden-ratio .z-overlay

Best practices

• Always set a positioning context — .p-absolute needs a parent with .p-relative (or another positioned ancestor). Without one, the element positions relative to the viewport.
• Combine with z-index — positioned elements often overlap others. Use z-index utilities to control stacking.
• Prefer placement classes over raw CSS — .at-top-right .inset-sm is more readable and maintainable than hand-written top / right / translate combinations.
• Use logical insets when possible — the --tng-p-block-inset and --tng-p-inline-inset properties respect writing direction, making layouts RTL-friendly out of the box.