CSS Position fixed, sticky and absolute explained

In this article we will learn how css position fixed, sticky and absolute works. Let us understand each of them with an example.
Position: Fixed: An element with
position: fixed;is positioned relative to the viewport, which means it always stays in the same place even if the page is scrolled. The top, right, bottom, and left properties are used to position the element.
Example: Say we want to have a message icon on our site and it should always be visible to the user where ever he scrolls. In such a scenario we will use position: fixed property of CSS Layout.
.fixed-icon{
position: fixed;
right: 0;
top: 140px;
}Position: Absoulte: An element with
position: absolute;is positioned relative to the nearest positioned ancestor (instead of positioned relative to the viewport, like fixed).
.absolute-mssg-box{
position: absolute;
top: 40px;
right: a0px;
}However; if an absolute positioned element has no positioned ancestors, it uses the document body, and moves along with page scrolling.
Position: Sticky: An element with
position: sticky;is positioned based on the user's scroll position.
Example: In this example we have a code block and besides it there is a copy icon. If the user scrolls and the code block is visible in the viewport then the copy icon should also scroll till the end of code block. This can be achieved using position: sticky.
.sticky-icon{
position: sticky;
top: 0;
}That’s it, Thank you reading :)