Understanding CSS Position:Sticky
In trying to help various forum users all over the web,I realized that how position:sticky seems to confuse people. How it works in relation to the positioning attributes (top, left, bottom, right) is very poorly explained. In general that the positioning values do not move things around as-per how they work with other positioning such as relative, absolute, or fixed really bumfiddles the learning of beginners and experts alike.
The Key Is That It Introduces An All New Behavior!
With position:relative you move where something is drawn by the amount set on top, bottom, left, or right, but it remains “where it was” so far as other elements are concerned for sizing and flow around it. This too seems to confuse people but consider this pen:
With relative we don’t actually move the element in layout. All we do is move where it is drawn. There’s a difference!
With absolute and fixed those same values set where in relation to the relevant parent container (nearest positioned element for absolute, viewport for fixed) to…
