vant 动态 粘性布局_使用 position:sticky 实现粘性布局

如果问，CSS 中 position 属性的取值有几个？

大部分人的回答是，大概是下面这几个吧？

{

position: static;

position: relative;

position: absolute;

position: fixed;

}

额，其实，我们还可以有这 3 个取值：

{

/* 全局值 */

position: inherit;

position: initial;

position: unset;

}

没了吗？偶然发现其实还有一个处于实验性的取值，position:sticky(戳我查看MDN解释)：

{

position: sticky;

}

卧槽，什么来的？

前端发展太快，新东西目接不暇，但是对于有趣的东西，还是忍不住一探究竟。(只怪当初...)

初窥 position:sticky

sticky 英文字面意思是粘，粘贴，所以姑且称之为粘性定位。下面就来了解下这个处于实验性的取值的具体功能及实用场景。

这是一个结合了 position:relative 和 position:fixed 两种定位功能于一体的特殊定位，适用于一些特殊场景。

什么是结合两种定位功能于一体呢？

元素先按照普通文档流定位，然后相对于该元素