在我之前的认知中，position值有static(默认)、relative(相对)、absolute(绝对)、fixed(固定不变)
这四个值大家了解css的都是知道的我就不多说，这里要说的是sticky(粘性)，sticky是17年浏览器才开始支持的，它会产生动态效果，很像relative和fixed的结合：一些时候是relative定位（定位基点是自身默认位置），另一些时候自动变成fixed定位（定位基点是视口）。
sticky生效的前提是，必须搭配top、bottom、left、right这四个属性一起使用，不能省略，否则等同于relative定位，不产生"动态固定"的效果。原因是这四个属性用来定义"偏移距离"，浏览器把它当作sticky的生效门槛。
它的具体规则是，当页面滚动，父元素开始脱离视口时（即部分不可见），只要与sticky元素的距离达到生效门槛，relative定位自动切换为fixed定位；等到父元素完全脱离视口时（即完全不可见），fixed定位自动切换回relative定位。
要实现效果只需要简单css {position:sticky;top:0;}
参考链接 http://www.ruanyifeng.com/blog/2019/11/css-position.html