粘性定位（sticky）详解

目录

一、粘性定位 sticky

 二、粘性定位特点

三、粘性定位实例

 四、粘性定位为什么不起作用

---

一、粘性定位 sticky

   sticky跟前面四个属性值都不一样，它会产生动态效果，很像relative和fixed的结合：一些时候是relative定位（定位基点是自身默认位置），另一些时候自动变成fixed定位（定位基点是视口）。

语法：

选择器 { position: sticky; top: 10px; }

sticky能够形成"动态固定"的效果。比如，百度新闻首页的导航栏，初始加载时在自己的默认位置（relative定位）

相对定位

 滚动条下滑变成固定定位页面滚回去又会变成想对定位

 二、粘性定位特点

• 以浏览器的可视窗口为参照点移动元素（固定定位特点）

• 粘性定位占有原先的位置（相对定位特点）

• 必须添加 top 、left、right、bottom 其中一个才有效

三、粘性定位实例

打开页面 box2 相对定位

 滑动页面 box2 变成绝对定位

 四、粘性定位为什么不起作用

有时候设置会发现粘性定位不起作用，又找不到原因，可以看看有没有以下几点原因：

1、父元素不能overflow:hidden或者overflow:auto属性。
2、必须指定top、bottom、left、right4个值之一，否则只会处于相对定位
3、父元素的高度不能低于sticky元素的高度
4、sticky元素仅在其父元素内生效