粘性定位------------------position:sticky

position:sticky---------------------用这个属性，主要是ios下的safari已经支持了，在ios下可以免去js模拟，效果更平滑；安卓的话暂时不要考虑了

关于这个position:sticky的介绍，可以google一下，网上有很多介绍了 。

在这简述一下：

position: sticky，自IOS 6.1就支持了，最近Chrome56才支持 没有滚过初始位置时，和 position: relative 表现类似（占据空间， !static 能为后代元素提供定位参照），但 top 和 left 无效 滚过初始位置时，和 position: fixed 表现类似， top 和 left 生效，固定在屏幕可见区域，但页面 不会抖动 ， 原本占据的空间还在（自带守家占位符的感觉）。

今天主要讲的是，position:sticky的使用条件，很多同学经常遇到position:sticky失效的情况，今天对sticky这个属性做了一番调试，总结了一些规律。现分享下。

俗话说，弄不清楚原理，就熟记结论也是一样的，那就抛出结论，sticky满足以下条件才能生效：

1、具有sticky属性的元素，其父级高度必须大于sticky元素的高度。

2、sticky元素的底部，不能和父级底部重叠。（这条不好表述，文后详细说明）

3、sticky元素的父级不能含有overflow:hidden 和 overflow:auto 属性

4、必须具有top，或 bottom 属性。

同时要注意，sticky元素仅在他父级容器内有效，超出容器范围则不再生效了。

如果遇到类似问题（要亲手测试查验）