css position: sticky；实现顶部悬停，吸顶效果,与 position: fixed；区别

position:fixed; 
//固定定位是将某个元素固定在浏览器的某个确定的位置，不随滚动条的移动而变化
//固定定位的位置是  相对当前浏览器窗口的；

position: sticky;
//粘性定位
//在使用时，千万注意：父元素(包含祖先元素)不能overflow:hidden或者overflow:auto属性

区别：

position:fixed; ：设置了position:fixed; 之后则元素固定的位置是相对于浏览器窗口的
position: sticky;: 在滚动到设置的top高度之前，表现和position: relative;是一样的，在滚动到top高度之后会粘性定位在规定的（top,bottom,right,left）父元素位置

总结：
所以在实际应用的时候，如果我们只是要把元素固定在浏览器顶部，**position:fixed; position: sticky;**是都可以实现的

但是如果是左右分栏或者其他布局，我们需要这个元素固定悬停在相对于父元素的位置，position: sticky;更易实现。

场景：
1.固定在浏览器顶部

2、固定在相对于父元素位置

应用：
设置position:sticky同时给一个(top,bottom,right,left)之一即可
使用条件：

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

参考：
作者：Navy
链接：https://juejin.cn/post/6844904199256293384
来源：稀土掘金