position: sticky;

position的属性我们一般认为有

position:absolute

postion: relative

position:static

position:fixed

 position: inherit;

 position: initial;

 position: unset;

但是最近在一个微信技术群里看到了一个新的属性觉得很有趣就是

position:sticky   这个可以称为粘性定位，它把position:relative和position:fixed两个定位结合一起，可以适用一些类似固定头部这种。

元素先按照普通文档流定位，然后相对于该元素在流中的 flow root（BFC）和 containing block（最近的块级祖先元素）定位。

然后，元素定位表现为在跨越特定阈值前为相对定位，之后为固定定位。

假设设定的阈值是 top:0 ，这个值表示当元素距离页面视口（Viewport，也就是fixed定位的参照）顶部距离大于 0px 时，元素以 relative 定位表现，而当元素距离页面视口小于 0px 时，元素表现为 fixed 定位，也就会固定在顶部。

这个特定阈值指的是 top, right, bottom 或 left 之一，换言之，指定 top, right, bottom 或 left 四个阈值其中之一，才可使粘性定位生效。否则其行为与相对定位相同。

top和left的优先级高于bottom,right

它的兼容性非常差，目前还属于实验阶段。 webkit 内核的要添加上私有前缀-webkit-

position:sticky的生效是有一定的限制的，总结如下：

须指定 top, right, bottom 或 left 四个阈值其中之一，才可使粘性定位生效。否则其行为与相对定位相同。

并且top和bottom同时设置时，top生效的优先级高，left和right同时设置时，left的优先级高。

设定为position:sticky元素的任意父节点的 overflow 属性必须是 visible，否则position:sticky不会生效。这里需要解释一下：

如果position:sticky元素的任意父节点定位设置为overflow:hidden，则父容器无法进行滚动，所以position:sticky元素也不会有滚动然后固定的情况。

如果position:sticky元素的任意父节点定位设置为position:relative | absolute | fixed，则元素相对父元素进行定位，而不会相对 viewprot 定位。

达到设定的阀值。这个还算好理解，也就是设定了position:sticky的元素表现为relative还是fixed是根据元素是否达到设定了的阈值决定的。

详细的相关知识和示例，可以查看以下网址：

https://www.cnblogs.com/coco1s/p/6402723.html