You may have used the CSS position property with the relative and absolute values in the past. Modern web browsers now support the sticky value. It allows you to make elements stick when the scroll reaches a certain point.

An element with position: sticky will behave like a relatively-positioned element until it reaches a specified point and then starts behaving like a statically-positioned element.

In this article, you will create an example that uses position: sticky to understand how it behaves and functions.

Prerequisites
If you would like to follow along with this article, you will need:

An understanding of CSS property and values.
A code editor.
A modern web browser that supports position: sticky.
Using position: sticky
Consider a div container that will be a flex container. Nested inside will be 4 additional div elements that will be the flex items. The 4 div elements will contain images for shark-1, shark-2, shark-3, and shark-4.

In your code editor, use the following markup: