单词sticky的中文意思是“粘性的”，position:sticky表现也符合这个粘性的表现。基本上，可以看出是position:relative和position:fixed的结合体。当元素在屏幕内，表现为relative，就要滚出显示器屏幕的时候，表现为 fixed。例如，可以标题吸顶。其中导航元素CSS如下：

nav{position: sticky;top: 0;}

于是，正如大家看到，随着页面的滚动，当导航距离上边缘 0 距离的时候，黏在了上边缘，表现如同position:fixed。可以实现富有层次的滚动交互，比如下面：

1.实现表头固定，冻结表头

2.总结

元素根据正常文档流进行定位，然后相对它的最近滚动祖先（nearest scrolling ancestor）和 containing block (最近块级祖先nearest block-level ancestor)，包括table-related元素，基于top, right, bottom, 和left的值进行偏移。偏移值不会影响任何其他元素的位置。

该值总是创建一个新的层叠上下文（stacking context）。注意，一个sticky元素会“固定”在离它最近的一个拥有“滚动机制”的祖先上（当该祖先的overflow是hidden, scroll, auto, 或overlay 时），即便这个祖先不是最近的真实可滚动祖先。这有效地抑制了任何“sticky”行为。