The documentation was pretty hard to understand since I am new to CSS. So can anyone please explain the actual difference between position:sticky and position:fixed? I would also appreciate an example.
I have gone through https://developer.mozilla.org/en-US/docs/Web/CSS/position and a few other articles, but I still don't get it.
position: fixed always fixates an element to some position within its scrolling container or the viewport. No matter how you scroll its container, it will remain in the exact same position and not affect the flow of other elements within the container.
Without going into specific details, position: sticky basically acts like position: relative until an element is scrolled beyond a specific offset, in which case it turns into position: fixed, causing the element to "stick" to its position instead of being scrolled out of view. It eventually gets unstuck as it gets scrolled back toward its original position. At least, that's how I understand it in theory.
The reason why I want to avoid going into details is because position: sticky is brand new, experimental (as shown in the document you link to), and not finalized yet. Even what I've stated above may well change in the near future. You won't be able to use position: sticky yet anyway (hopefully this will change within the next year).
Mozilla recently presented its implementation of position: sticky here. It's highly worth a watch.
See this self-explanatory example for better clarity. CODEPEN
Fixed Position:
An element with fixed position is displayed with respect to the viewport or the browser window itself. It always stays in the same place even if the page is scrolled.
It does not effect the flow of other elements in the page ie doesn't occupy any specific space(just like position: absolute).
If it is defined inside some other container (div with or without relative/absolute position), still it is positioned with respect to the browser and not that container. (Here it differs with position: absolute).
Sticky Position:
An element with sticky position is positioned based on the user's scroll position. As @Boltclock mentioned it basically acts like position: relative until an element is scrolled beyond a specific offset, in which case it turns into position: fixed. When it is scrolled back it gets back to its previous (relative) position.
It effects the flow of other elements in the page ie occupies a specific space on the page(just like position: relative).
If it is defined inside some container, it is positioned with respect to that container. If the container has some overflow(scroll), depending on the scroll offset it turns into position:fixed.
So if you want to achieve the fixed functionality but inside a container, use sticky.
Let me make it extremely simple.
fixed position will not occupy any space in the body, so the next element(eg: an image) will be behind the fixed element.
sticky position occupies the space, so the next element will not be hidden behind it.
Following image is fixed some part of image is hidden behind navbar, because Fixed element doesn't occupy space. You can solve this by adding margin or before/ after pseudo classes
This eg is of sticky position. Here Image is fully shown, nothing is hidden behind navbar because sticky elements occupy space in the document.
Suppose you have a navigation bar at the top of your website and you want it to be fixed so that as you scroll down the page, it's always visible.
If you give it position: fixed; then the page content at the top will be hidden below the navigation bar. In contrast, if you decide to give it position: sticky; top: 0;, the navigation bar will remain in the flow of the document, and gracefully pushes the content underneath it below, so no content is hidden.
When you apply position: fixed; the navigation bar escapes from the normal document flow, similarly to when you float an element.
fixed get fixed on both X and Y axis while sticky is fixed on X axis only.sticky will be fixed only till the end of the container, but fixed will be fixed until the end of the webpage.
Fixed and Sticky both are very similar but there is one important difference between them -
1. position:fixed : It will directly fixed the element at provided location using top,bottom,left,right.
<div style="position:relative">
<p style="position:fixed; top:0px">paragraph with fixed position</p>
</div>
- here paragraph with fixed position will fixed always at top:0px.
2. position:sticky : It will not directly fixed the element at provided location. It will move element with scroll initially. It will fixed the element only if element reached to specified location using top,bottom,left,right. Until it will move with scroll.
<div style="position:relative">
<p style="position:sticky;top:0px">paragraph with sticky position</p>
</div>
- here paragraph with sticky position will fixed or stick only if element will reached to top 0px position.
