In CSS, the position property is used to specify the positioning behaviour of an element relative to its containing element or the document itself.
This is the default value. Elements with position: static; are positioned according to the normal flow of the document. Top, right, bottom, left, and z-index properties do not apply.
Elements with position: relative; are positioned relative to their normal position. You can use top, right, bottom, and left properties to adjust the element's position from its normal position without affecting the layout of surrounding elements.
Elements with position: absolute; are positioned relative to the nearest positioned ancestor (an ancestor with a position other than static), or the initial containing block if no positioned ancestor is found. Absolute positioning removes the element from the normal document flow, so it doesn't affect the layout of surrounding elements.
Elements with position: fixed; are positioned relative to the browser window or the viewport. They remain fixed in their position even when the page is scrolled. Fixed positioning also removes the element from the normal document flow.
Elements with position: sticky; behave like position: relative; within its container until a specified offset threshold is met. Once the threshold is passed during scrolling, the element becomes fixed until the container's bottom edge is reached.
.relative {
position: relative;
top: 20px;
left: 30px;
}
.absolute {
position: absolute;
top: 50px;
right: 20px;
}
.fixed {
position: fixed;
bottom: 0;
right: 0;
}