Sticky Positioning

Sticky positioning in CSS is a hybrid of relative and fixed positioning. An element with position: sticky; is initially positioned relatively, but when the user scrolls to a point where the element would normally scroll off-screen, it becomes fixed, sticking to the specified offset (e.g., top: 0;) until the containing block's boundary is reached.

Visit the following resources to learn more:

• @article@CSS Position Sticky - How It Really Works!
• @video@A couple of cool things you can do with CSS position sticky
• @video@CSS position deep dive