position: sticky has like 90% browser support, and it fails quite gracefully, and it's better than using scroll-based JS positioning, so all in all using it might be a great example of progressive enhancement. That said, it does have some quirks, eg when having a parent with explicitly set overflow property.
As for position: relative, what might be the most popular use case for it is creating a new containing block for absolutely positioned elements. Basically, if you want an element with position: absolute to have 0,0 coordinates somewhere other than top left corner of the page - put position: relative on its parent to use parent's top left corner as a start.
position: stickyhas like 90% browser support, and it fails quite gracefully, and it's better than using scroll-based JS positioning, so all in all using it might be a great example of progressive enhancement. That said, it does have some quirks, eg when having a parent with explicitly setoverflowproperty.As for
position: relative, what might be the most popular use case for it is creating a new containing block for absolutely positioned elements. Basically, if you want an element withposition: absoluteto have 0,0 coordinates somewhere other than top left corner of the page - putposition: relativeon its parent to use parent's top left corner as a start.Yeah, the problem here is the mobile browsers! The quirks here can be a big problem to make it work as you want it to work.