What is the difference between sticky and fixed?

I am going through display position class and still can’t get my head around position: sticky; I understood the application for fixed to be used in instances where you need an element to stay in place such as nav bar. But what about sticky? What are some of the use cases?

Elements with a position: fixed have a fixed (hence the name) x and y coordinate. They’ll always stay at that position. It kind of behaves like position absolute, as it has no defined space on the page and will be positioned over or under other elements. Usually there’s a z-index involved too.

Position sticky behaves like any regular element, until it reaches an edge of the page (by scrolling for example). After that it will just stick to the page, until you scroll back. But the original space where it was will be left empty.

Sticky is mostly used for scrolling headers or navigation at the top of the page, so that you can easily go to another page without having to scroll back.

Fixed is mostly used for widgets these days I guess. Like a social media bar that you sometimes see on the right side stuck to the edge of the page, or a newsletter signup form that’s at the bottom of the screen.