CSS position: sticky; 粘性定位初识

之前所熟知的CSS position 属性值 有relative、absolute、fixed，当然也不能忽略了static(默认)和inherit(继承)。

偶然的一次在 MDN：https://developer.mozilla.org/zh-CN/docs/Web/CSS/position
看到了一个新的属性值，它就是我们今天介绍的主角sticky。

position:sticky;是粘性定位，新的定位方式，专门用于页面滚动的时候的定位，可以方便实现吸顶条的效果。

粘性定位是相对定位和固定定位的混合。元素在跨越特定阈值前为相对定位(relative)，之后为固定定位(fixed)。可以看出这是他们哥几个中最聪明的了，可谓后来居上呀。

#box { position: sticky; top: 20px; }

在 viewport 视口滚动到元素 top 距离小于 20px 之前，元素为相对定位。之后，元素将固定在与顶部距离 20px 的位置，直到 viewport 视口回滚到阈值以下。
看起来 so easy，不是么。

but，我们还是要先了解在使用过程中的一些事项：
1、父元素不能overflow:hidden或者overflow:auto属性。
2、必须指定top、bottom、left、right4个值之一，否则只会处于相对定位
3、父元素的高度不能低于sticky元素的高度
4、sticky元素仅在其父元素内生效

兼容性的问题请参见 https://developer.mozilla.org/zh-CN/docs/Web/CSS/position#Browser_compatibility

光说不练假把式，点击这里立刻动手试试

好啦，今天就先记录到这里了，同时也做一个分享，恳请大神指正、补充。