Position
Position an element absolute to a side of the ancestor stacking context.
Type
Position an element absolute to a side of the ancestor stacking context.
Usage
/* Format */
.u-position--{type} {}
/* Examples & modifiers */
.u-position--absolute {}
.u-position--fixed {}
.u-position--relative {}
.u-position--sticky {}| Modifier | Values | Description |
|---|---|---|
|
type
|
absolute, fixed, relative, sticky | Sets element's position type to absolute, fixed, relative, or sticky. |
Preview
Preview
Side
Position an element to a side of the ancestor stacking context.
Usage
/* Format */
.u-{side}--{size} {}
/* Examples & modifiers */
.u-top--0 {}
.u-top--1 {}
.u-top--2 {}
.u-top--3 {}
.u-top--4 {}
.u-right--0 {}
.u-right--1 {}
.u-right--2 {}
.u-right--3 {}
.u-right--4 {}
.u-bottom--0 {}
.u-bottom--1 {}
.u-bottom--2 {}
.u-bottom--3 {}
.u-bottom--4 {}
.u-left--0 {}
.u-left--1 {}
.u-left--2 {}
.u-left--3 {}
.u-left--4 {}| Modifier | Values | Description |
|---|---|---|
|
side
|
top, right, bottom, left | Sets element positioned to a specified side |
|
size
|
0, 1, 2, 3, 4 | Sets the offset distance from the specified side, with 0 being flush against the edge and 1-4 applying incremental spacing values from the design system. |
Examples
Absolute
Relative