CSS Position Sticky - How It Really Works!

CSS position sticky has really good browser support, yet most developers aren’t using it.

The reason for that is twofold: First, the long wait for good browser support: It took quite a long time for browser support to happen, and by the time it did the feature was forgotten.

The second reason is that most developers don’t fully understand the logic behind how it works, and that’s where I come in.

I assume you all know CSS Positions, but let’s have a brief review:

Up until 3 years ago, there were four CSS Positions: static, relative, absolute and fixed.

The main difference between static or relative and absolute or fixed was the space they take up in the flow of the DOM. Positions static & relative keep their natural space in the flow of the document, while the absolute & fixed don’t — their space is removed and they have a floating behavior.

The new Position Sticky has similarities with all types, as I will soon explain.

My First Play with Position Sticky

I assume most of you have played with position sticky. So had I for quite a while, until I realized that I didn’t totally understand it.

On the first play with position sticky, everyone quickly understands that the element sticks when the viewport gets to the defined position.

Example:

.some-component{ position: sticky; top: 0; }

The problem is that sometimes it works while other times it doesn’t. When it does work, the element sticks, but in other parts of the scrolling it stops sticking. As someone who eats and breaths CSS daily, it was unacceptable for me to not understand the issue to its root , so I decided to thoroughly explore Position Sticky.