CSS Position fixed, sticky and absolute explained

Rohini Girase
Nov 4 · 2 min read

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 :)

Rohini Girase

Written by

FrontEnd Developer

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade