Position Sticky in CSS

position: sticky is a positioning property in CSS, which makes an element behave like position: fixed when the page is scrolled to a certain position, and behave like position: relative at other positions. Specifically, the element will “stick” at the set position until the edge of its parent container reaches the corresponding edge of the “sticky” element.

https://developer.mozilla.org/en-US/docs/Web/CSS/position#description

The element is positioned according to the normal flow of the document, and then offset relative to its nearest scrolling ancestor and containing block (nearest block-level ancestor), including table-related elements, based on the values of top, right, bottom, and left. The offset does not affect the position of any other elements.

This value always creates a new stacking context. Note that a sticky element “sticks” to its nearest ancestor that has a “scrolling mechanism” (created when overflow is hidden, scroll, auto, or overlay), even if that ancestor isn’t the nearest actually scrolling ancestor.

However, position: sticky elements do not actually become position: relative. Instead, when it’s not “sticky” (i.e. when it doesn’t need to stick to the screen), it behaves like position: relative, which means it will layout according to the normal document flow, but its position property does not actually change.

Here are a few situations that cause a position: sticky element to behave like a position: relative:

1. Scroll position is not within the threshold: When the page does not scroll to the position specified by the top, bottom, left, right and other sticky boundaries of the element, the element looks just like a position: relative one.

2. Bounds of parent element: When the bottom of a position: sticky element reaches the bottom of its parent container, it will stop sticky behavior as if it were position: relative.

3. Compatibility and Limitations: If the parent element has an overflow attribute with a value other than visible, or any ancestor element of the position: sticky element has a transform, filter, perspective or will-change attribute, or any ancestor element of the position: sticky element is not position: static (such as position: relative , position: absolute, or position: fixed) , then position: sticky may not work and the element will behave like position: relative.

4. No threshold specified: If at least one attribute value among top, bottom, left, right is not specified for the position: sticky element, it will not have sticky behavior.

Note that even in these cases, the element’s position property is sticky, but its behavior looks similar to relative. This is because it is not fixed in the viewport but continues to scroll with the contents of the scroll container.

Example

Take Apple’s Product detail’s page for example: https://www.apple.com/shop/buy-iphone/iphone-15-pro

The frame of this page looks like this: ⬇️

As we scroll down the page, the red block (I set position:sticky) starts to stick to the screen when the scroll position reaches the top threshold (Situation 1). As we continue to scroll down, when our scroll position reaches the bottom of the red block parent element, it’ll stops sticking (Situation 2).

Source code can be viewed in Here

Compatibility

Check out the Compatibility in https://caniuse.com/css-sticky