Overview
Position controls how an element's x,y coordinates are calculated. The default value is "static," and the other 4 properties cause different behavior.
| Class Name |
CSS Properties |
Description |
.position__static |
position: static;
|
The default position; the element is positioned according to the normal flow of the document. |
.position__relative |
position: relative;
|
The element is positioned relative to its normal position, allowing for offset adjustments. |
.position__absolute |
position: absolute;
|
The element is positioned relative to its nearest positioned ancestor or the initial containing block. |
.position__fixed |
position: fixed;
|
The element is positioned relative to the viewport, meaning it stays in place even when the page is scrolled. |
.position__sticky |
position: sticky;
top: 0;
|
The element is treated as relative until it crosses a specified scroll threshold, then it is treated as fixed. |