CSS Position
Use these shorthand utilities for quickly configuring the position of an element.
Position values
What is css position?
In CSS, the position property controls an element's layout. Values like static, relative, absolute, fixed, and sticky determine how and where elements appear in relation to others, the viewport, or a scroll position. It enables precise control over positioning within the page structure.
Quick positioning classes are available, though they are not responsive.
...
...
...
...
...
Responsive variations also exist for position.
.position-{sm-xl}-static.position-{sm-xl}-relative.position-{sm-xl}-absolute.position-{sm-xl}-fixed.position-{sm-xl}-sticky
Example
top left
top right
bottom left
bottom right
center
top left
top right
bottom left
bottom right
center
Other Position Utilities
| Class | Properties |
|---|---|
top-0 |
top: 0; |
right-0 |
right: 0; |
bottom-0 |
bottom: 0; |
left-0 |
left: 0! ; |
top-auto |
top: auto; |
right-auto |
right: auto; |
bottom-auto |
bottom: auto; |
left-auto |
left: auto; |
Responsive variations also exist for position.
.top-{sm-xl}-0.top-{sm-xl}-auto.bottom-{sm-xl}-0.bottom-{sm-xl}-auto.left-{sm-xl}-0.left-{sm-xl}-auto.right-{sm-xl}-0.right-{sm-xl}-auto
On this page