Position
Control how an element is positioned relative to it's container or viewport
Properties
| Utility class | Description |
|---|---|
| .position-static | The default state. The element follows the normal document flow, and properties like top, bottom, left, and right have no effect. |
| .position-relative | The element remains in the normal document flow, but you can offset it relative to its original position without affecting surrounding elements. It also establishes a reference point for any absolutely positioned child elements. |
| .position-absolute | The element is removed from the normal document flow and creates no space for itself. It is positioned relative to its nearest "positioned" ancestor (one that is not static); if none exists, it is relative to the initial containing block (usually the body). |
| .position-fixed | The element is removed from the normal flow and pinned relative to the browser viewport. It stays in the same place even when the page is scrolled, which is common for navigation bars or "back to top" buttons. |
| .position-sticky | A hybrid that toggles between relative and fixed based on the user's scroll position. It behaves like a relative element until it reaches a specified threshold (e.g., top: 0), at which point it "sticks" to that position within its parent container while scrolling. |
Static position
The default state. The element follows the normal document flow, and properties like top, bottom, left, and right have no effect.
Example
top-1 to a static element does nothing — offset utilities only affect positioned elements (relative/absolute/fixed/sticky).Relative position
The element remains in the normal document flow, but you can offset it relative to its original position without affecting surrounding elements. It also establishes a reference point for any absolutely positioned child elements.
Top
| Utility class | Value |
|---|---|
| .top-auto | auto |
| .top-neg-3 | -24px |
| .top-neg-205 | -20px |
| .top-neg-2 | -16px |
| .top-neg-105 | -12px |
| .top-neg-1 | -8px |
| .top-neg-05 | -4px |
| .top-neg-2px | -2px |
| .top-neg-1px | -1px |
| .top-0 | 0 |
| .top-1px | 1px |
| .top-2px | 2px |
| .top-05 | 4px |
| .top-1 | 8px |
| .top-105 | 12px |
| .top-2 | 16px |
| .top-205 | 20px |
| .top-3 | 24px |
| .top-full | 100% |
Top - Example
.position-relative .top-1Right
| Utility class | Value |
|---|---|
| .right-auto | auto |
| .right-neg-3 | -24px |
| .right-neg-205 | -20px |
| .right-neg-2 | -16px |
| .right-neg-105 | -12px |
| .right-neg-1 | -8px |
| .right-neg-05 | -4px |
| .right-neg-2px | -2px |
| .right-neg-1px | -1px |
| .right-0 | 0 |
| .right-1px | 1px |
| .right-2px | 2px |
| .right-05 | 4px |
| .right-1 | 8px |
| .right-105 | 12px |
| .right-2 | 16px |
| .right-205 | 20px |
| .right-3 | 24px |
| .right-full | 100% |
Right - Example
.position-relative .right-1Bottom
| Utility class | Value |
|---|---|
| .bottom-auto | auto |
| .bottom-neg-3 | -24px |
| .bottom-neg-205 | -20px |
| .bottom-neg-2 | -16px |
| .bottom-neg-105 | -12px |
| .bottom-neg-1 | -8px |
| .bottom-neg-05 | -4px |
| .bottom-neg-2px | -2px |
| .bottom-neg-1px | -1px |
| .bottom-0 | 0 |
| .bottom-1px | 1px |
| .bottom-2px | 2px |
| .bottom-05 | 4px |
| .bottom-1 | 8px |
| .bottom-105 | 12px |
| .bottom-2 | 16px |
| .bottom-205 | 20px |
| .bottom-3 | 24px |
| .bottom-full | 100% |
Bottom - Example
.position-relative .bottom-1Left
| Utility class | Value |
|---|---|
| .left-auto | auto |
| .left-neg-3 | -24px |
| .left-neg-205 | -20px |
| .left-neg-2 | -16px |
| .left-neg-105 | -12px |
| .left-neg-1 | -8px |
| .left-neg-05 | -4px |
| .left-neg-2px | -2px |
| .left-neg-1px | -1px |
| .left-0 | 0 |
| .left-1px | 1px |
| .left-2px | 2px |
| .left-05 | 4px |
| .left-1 | 8px |
| .left-105 | 12px |
| .left-2 | 16px |
| .left-205 | 20px |
| .left-3 | 24px |
| .left-full | 100% |
Left - Example
.position-relative .left-1Absolute position
The element is removed from the normal document flow and creates no space for itself. It is positioned relative to its nearest "positioned" ancestor (one that is not static); if none exists, it is relative to the initial containing block (usually the body).
Example
.position-absolute .top-1 .right-1 is removed from flow and positioned relative to the parent (which has .position-relative).Fixed position
The element is removed from the normal flow and pinned relative to the browser viewport. It stays in the same place even when the page is scrolled, which is common for navigation bars or "back to top" buttons.
Example
.position-fixed .top-1 .right-1 is removed from flow and pinned to the viewport — it will remain visible while scrolling.Sticky position
A hybrid that toggles between relative and fixed based on the user's scroll position. It behaves like a relative element until it reaches a specified threshold (e.g., top: 0), at which point it "sticks" to that position within its parent container while scrolling.
Example
.position-sticky .top-0 will stick to the container's top edge as you scroll inside the container. When used in the page flow it will stick to the viewport when its container reaches the threshold.Utility classes
| Utility | Example | Code |
|---|---|---|
| .position-value | .position-absolute | class=("position-absolute") |
| .top-units | .top-1 | class=("top-1") |
| .right-units | .right-1 | class=("right-1") |
| .bottom-units | .bottom-1 | class=("bottom-1") |
| .left-units | .left-1 | class=("left-1") |
- Use single-quoted strings in Utility classes.
- Do not quote numbers or px values. With the exception of half (
05), values like'105', and'205'should be treated as strings. - String tokens for half values (like
05) and negative values (likeneg-1) may also be written with their unquoted number token equivalent:0.5,1.5,2.5,-1,-1.5, etc. - If multiple utilities share the same prefix (ex:
.text-or.flex-) or a single utility accepts multiple kinds of values (ex:.borderaccepts both border weight and border color), their shared mixin can accept multiple comma-separated values:u-text('primary-darkest', 'no-underline', 'bold')u-border-top(2px, 'accent-warm')- Output any utility mixin as
!importantby appending!importantto the mixin’s argument list: u-bg('red-warm-50v', !important)
