css之position
在我之前的认知中,position值有static(默认)、relative(相对)、absolute(绝对)、fixed(固定不变) 这四个值大家了解css的都是知道的我就不多说,这里要说的是sticky(粘性),sticky是17年浏览器才开始支持的,它会产生动态效果,很像 relative 和 fixed 的结合:一些时候是 relative 定位(定位基点是自身默认位置),另一些时候自动变成 fixed 定位(定位基点是视口)。 sticky 生效的前提是,必须搭配 top 、 bottom 、 left 、 right 这四个属性一起使用,不能省略,否则等同于 relative 定位,不产生"动态固定"的效果。原因是这四个属性用来定义"偏移距离",浏览器把它当作 sticky 的生效门槛。 它的具体规则是,当页面滚动,父元素开始脱离视口时(即部分不可见),只要与 sticky 元素的距离达到生效门槛, relative 定位自动切换为 fixed 定位;等到父元素完全脱离视口时(即完全不可见), fixed 定位自动切换回 relative 定位。 要实现效果只需要简单css {position:sticky;top:0;} 参考链接 http://www.ruanyifeng.com/blog/2019/11/css-position.html 来源: https:/