名称：css粘性定位

目录：

一、介绍

字数：大约200字

一、介绍

css定位的重要性就不多说啦。今天来看看定位中的粘性定位。

例如有下面列表：

我们给它添加黏性定位之后： 当设置黏性定位之后：

dt{
  position: sticky;
  top: 0;
}

正常情况下，和普通的元素没有什么区别，只有当接近top这个临界值时候，才会出现吸附的情况，也就是粘性定位。

那知道粘性定位之后，那很重要的一点是，这个定位是相对谁的呢：

粘性定位相对于上n层级第一个设置overflow的元素，也就是首先他去找父元素，找不到就继续往上一层继续找，直到我们的可视窗口，所以如果我们都不设置overflow的时候，就吸附到可视顶部

来验证一下：

dl{
  height: 300px;
  overflow: scroll;
  border: 4px solid red;
}

看看效果：

这样就完成啦。

🍺🍺🍺