CSS的position属性用于指定元素在文档流中的定位方式，position属性和top、bottom、left、right属性一起决定元素的最终位置。position属性拥有static、relative、absolute、fixed、sticky五个可选项，下面动画展示了一个吸顶导航菜单的样式，当向上滚动页面时导航菜单始终黏在顶部位置，使用sticky属性可以轻松实现这个效果。
在正式引出sticky特性之前，有必要重新回顾下position各个属性的特征，真正理解了它们的含义用起来才会得心应手，出现问题也有清晰的思路去排查并解决它，而且理解sticky也依赖对其他属性的理解。
static是默认行为
该关键字指定元素使用正常的布局行为，即元素在文档常规流中当前的布局位置。此时 top, right, bottom, left 和 z-index 属性无效。见下图黄色方框的位置，它所在的位置就是正常文档流应在的位置。
relative是相对原位置的偏移
该关键字下，元素先放置在未添加定位时的位置，在不改变页面布局的前提下调整元素位置。继续看黄色方框，假如仅仅设置position为relative的话，黄色方框的位置和static位置是一样的，也就是它按照正常文档流布局，但是此时top、left、right、bottom属性会改变黄色方框的位置，示例中黄色方框相对于原有位置向左、向下偏移了40px。
absolute是相对父级元素的偏移
元素会被移出正常文档流，并不为元素预留空间，通过指定元素相对于最近的非 static 定位祖先元素的偏移，来确定元素位置。包裹黄色方框的元素position被设置为relative，那么黄色方框就会依据其父级元素的位置为基准进行定位，示例中它相对于父级元素向左、向下偏移40px。
fixed是相对于视口的偏移
元素会被移出正常文档流，并不为元素预留空间，而是通过指定元素相对于屏幕视口（viewport）的位置来指定元素位置。下面的示例点击固定定位后，黄色方框移到了浏览器视口向左、向下40px的位置，且无论页面如何滚动，黄色框的位置始终和浏览器视口相对位置不变。
sticky是relative和fixed的结合体
最后，终于说到了ticky属性，它是relative和fixed属性的结合体，示例中黄色方框的样式设置为"position: sticky; top: 20px;"，为了演示sticky的效果，将其上级元素设置了一个固定的高度并显示滚动条，当黄色方框与父元素的顶部高度大于20px时，它表现出relative的行为（也和static相似），正常布局到文档流中；当达到top为20px阈值之后，黄色方框始保持top=20px的位置，表现出黏在顶端的效果，此时表现出fixed的行为。
最后给出上面演示示例的完整源码，实际运行并点击每个选项实际体验一下，相信理解会更加深刻：
css position演示
Position属性效果演示
这个示例演示css position属性
为了演示position: sticky效果
这里增加了一个可滚动的容器
上下滚动这段内容
你将发现黄色框会始终停留在视线范围内
就像黏在在顶部一样
重新向下滚动
黄色框还会恢复到原来的位置
使用sticky特性
可以实现很多特效
比如始终黏在顶部的菜单栏
发挥想象力还可以实现其他效果...
参考文献
[1]. https://developer.mozilla.org/zh-CN/docs/Web/CSS/position