关于定位position:sticky的经验总结

项目要求做一个仿照google浏览器的参数设置界面，拿到手任务的第一时间，去看了google浏览器设置界面的css结构，发现了很有趣的样式，即这次的总结position:sticky.

通过查询百度，知道了sticky属性有以下几个特点：

• 该元素并不脱离文档流，仍然保留元素原本在文档流中的位置。
• 当元素在容器中被滚动超过指定的偏移值时，元素在容器内固定在指定位置。亦即如果你设置了top: 50px，那么在sticky元素到达距离相对定位的元素顶部50px的位置时固定，不再向上移动。
• 元素固定的相对偏移是相对于离它最近的具有滚动框的祖先元素，如果祖先元素都不可以滚动，那么是相对于viewport来计算元素的偏移量。

但是在实际用起来，还是不出意料有了些小问题，自己仿照写的代码不生效，为什么？

首先想到了是不是自己代码里监听了滚动条事件和这个有冲突，把事件统统禁掉，还是不生效。

然后又开始百度，最后拿到了问题的答案：

position:sticky 属性，要求在其设置该属性的所有父级元素上，不能有明显的高度css属性，即height:100%等都不行，经过排查，发现height:auto是可行的，就把父级换成了height:auto.

问题解决。

猜想是因为设置高度会影响overflow属性，进而影响到sticky，关于这个原因我还是要继续百度，弄清楚为止，加油。