对于大多数人来说，对于css的定位属性，大家者基本上都是在和以下四种打交道。

position: static;
position: relative;
position: absolute;
position: fixed;

然而今天要介绍的主角则是正在实验阶段但是却令人激动的粘性定位元素（position: sticky）。

既然还在实验阶段不妨让我们看看CAN I USE 对它兼容性的描述：

sticky兼容性

虽然这种兼容性还很欠缺，但是对毕竟仍在试验阶段的sticky来说已经不错了。

扯了这么多没用的话，到底sticky这个粘性定位元素有什么用？

我们先来一段mdn的官方解释：

盒位置根据正常流计算(这称为正常流动中的位置)，然后相对于该元素在流中的 flow root（BFC）和 containing block（最近的块级祖先元素）定位。在所有情况下（即便被定位元素为 table 时），该元素定位均不对后续元素造成影响。当元素 B 被粘性定位时，后续元素的位置仍按照 B 未定位时的位置来确定。position: sticky 对 table 元素的效果与 position: relative 相同。

简单来讲就是：设置粘性定位后，该元素仍旧处于正常流中，当到他到定位的位置后，该粘性元素固定，其他元素（没有设置粘性定位）会被此粘性元素覆盖，当下一个粘性元素来到时，之前的粘性元素则会被覆盖。

也就是下面这种效果：

3个设置了粘性定位的div相互覆盖效果图

基本代码如下，注意 某些浏览器下需要加前缀支持(position: -webkit-sticky)

//html
  1
  2
  3


//css.box2{
  float:left;
  width:420px;
  height:400px;
  overflow-y:auto;
  overflow-x:hidden;
  margin-left:200px;
}

.c1,.c2,.c3{
  width:420px;
  height:400px;
  line-height:400px;
  font-size:40px;
  text-align:center;
  position:sticky;
  position: -webkit-sticky;
  top:0;
}

.c1{
  background:red;
}
.c2{
  background:green;
}
.c3{
  background:skyBlue;
}

当然也我在codepen 给大家写了2个案例，大家可以去看看玩玩：https://codepen.io/yuanhaoyu/pen/qjdqVG

总而言之，对于简单几个css代码就能实现如此效果的sticky，我是无比激动的，真的很希望能在生产中早日见到它。

参考资料：
mdn：https://developer.mozilla.org/zh-CN/docs/Web/CSS/position

作者：_proto_麻瓜一袁
链接：https://www.jianshu.com/p/647c577cf221

ITPub博客

CSS趣味曲奇-粘性定位元素

最新文章