position:sticky;

sticky原意为“粘贴的”，属于CSS3中position定位属性新增的一个属性值，称之为粘性定位，它是结合relative相对定位和fixed固定定位于一体的特殊定位方式，适用于某些特殊场景比如sticky footer。

例如：设置sticky的元素默认定位方式为relative，当它的位置超过指定阈值时定位方式会自动切换为fixed，直到父级元素离开屏幕。

https://codepen.io/junchow/pen/zYrrORb?editors=1000

当元素position设置为sticky后，在屏幕视口viewport范围内该元素的位置不会受到定位阈值top、right、bottom、left的影响，当该元素的位置将要溢出或偏离视口范围时，position定位方式会自动切换为fixed，然后再根据定位阈值计算新的固定位置。

sticky粘性定位生效条件

• 元素自身在文档流中的位置
• 元素父级容器的边缘

sticky粘性定位的特点

• sticky元素不会脱离文档流，仍旧保留元素原本在文档流中的位置。
• 当sticky元素在容器中被滚动的超过指定的偏移值时，sticky元素会在容器内固到某个指定的位置。
• sticky元素固定的相对偏移量是参照距离自己最近且具有滚动属性的祖先元素，如果该祖先元素不可以滚动则会相对于视口viewport来计算偏移量。

默认元素按照标准文档流进行定位，然后相对于元素在文档流中的BFC（Block Flow Root）和Container Block（最近的块级容器元素）进行定位。其后元素定位方式表现为在跨越特定阈值前为相对定位之后则为绝对定位。这个“特定阈值”指的是top、right、bottom、left之一，也就是说，指定top、right、bottom、left四个特定阈值之一，才能使sticky粘性定位生效，否则与relative相对定位相同。

sticky粘性定位的缺陷

sticky粘性定位并非W3C推荐的标准，之所以出现是因为使用监听scroll滚动事件来实现粘性布局会使浏览器进入慢滚动模式，这与浏览器想要通过硬件加速来提升滚动体验相悖。

粘性页脚sticky footer

粘性页脚是指当内容区域较少时，页脚固定在底部。当内容变多一旦超过固定高度时，页脚会随着内容的增多一直停留在内容结束位置，而非固定在底部。

例如：正常情况下，在没有设置sticky粘性定位时，当内容过少页脚不会固定在视窗底部，而是跟随着wen