An element with position:sticky is positioned based on the user's scroll
position
A sticky element toggles between relative and
fixed,
depending on the scroll position
It is positioned relative until a given offset position is met in the
viewport
- then it "sticks" in place (like position:fixed)
You must specify at least one of top, right,
bottom
or left for sticky positioning to work
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
(MDN)
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
