在过去的日子里，一个“粘性”的实现需要编写一个复杂的滚动处理程序来计算元素的大小。试图优化处理程序导致“粘住”和“不粘贴”中的细微延迟，这导致了抖动。JavaScript实现在性能方面也滞后，特别是在 Element.getBoundingClientRect() 使用时。
position 的属性值
{
position: static; /*默认值。没有定位，元素出现在正常的流中（忽略 top, bottom, left, right 或者 z-index 声明）。*/
position: relative; /*生成相对定位的元素，相对于其正常位置进行定位。*/
position: absolute; /*生成绝对定位的元素，相对于 static 定位以外的第一个父元素进行定位。*/
position: fixed; /*生成绝对定位的元素，相对于浏览器窗口进行定位。*/
position: inherit; /*规定应该从父元素继承 position 属性的值。*/
position: initial; /*关键字用于设置 CSS 属性为它的默认值，可作用于任何 CSS 样式。（IE 不支持该关键字）*/
position: unset; /*关键字我们可以简单理解为不设置。其实，它是关键字 initial 和 inherit 的组合。*/
position: sticky; /*它可以通过指示偏移量来实现“粘性”*/
}
sticky : 盒位置根据正常流计算(这称为正常流动中的位置)，然后相对于该元素在流中的 flow root（BFC）和 containing block（最近的块级祖先元素）定位。在所有情况下（即便被定位元素为 table 时），该元素定位均不对后续元素造成影响。当元素 B 被粘性定位时，后续元素的位置仍按照 B 未定位时的位置来确定。position: sticky 对 table 元素的效果与 position: relative 相同。
