sticky定位必须配合top/bottom/left/right才生效，否则降级为relative；top:0贴最近可滚动祖先容器顶部而非视口；top优先于bottom，ie全系不支持，safari旧版有抖动问题。
sticky定位不写top/bottom就等于没写
因为position: sticky本身不定义位置，它只是一个“触发开关”——只有配合top、bottom、left或right中的至少一个值，浏览器才把它当作粘性元素处理。只写position: sticky，渲染引擎会直接降级为position: relative，完全无吸附效果，控制台也不报错，所以特别容易被忽略。
top: 0不是“贴到浏览器顶部”，而是贴到滚动容器顶部
很多人以为top: 0是相对于视口，其实它是相对于**最近的可滚动祖先容器**的内边距起点。比如把header放在一个div.scroll-container { height: 400px; overflow: auto; }里，那top: 0就是贴到这个div的顶部内边缘，不是整个页面顶部。如果父容器没设overflow（比如只是height加padding），它就不是滚动上下文，sticky直接失效。
同时设top和bottom时，bottom会被静默忽略
垂直方向上top优先级永远高于bottom，哪怕你写成top: auto; bottom: 0;，只要top不是auto，bottom就不起作用。水平方向同理：left优先于right。多方向阈值不是叠加生效，而是互斥触发条件——top生效时bottom根本不会参与计算。
IE全系不支持，Safari旧版有抖动，且父容器不能有overflow:hidden
这些限制不是“建议”，而是硬性失效条件：
-
overflow: hidden、overflow: auto或overflow: scroll的父容器会让sticky直接失效（注意：overflow: overlay在部分新版 Safari 中仍可用） - IE 11及更早版本完全不识别
position: sticky，必须用position: fixed降级方案 - 某些 Safari 版本（如 iOS 15.4 之前）在快速滚动时会出现吸附后突然跳动的现象，本质是滚动事件节流导致阈值判断延迟
- sticky元素若为
display: flex容器的直接子项，且父容器设了align-items: stretch，旧版 Safari 可能忽略top值
真正让sticky“动起来”的从来不是CSS属性本身，而是滚动容器、偏移值、渲染上下文三者严丝合缝的配合；少一个，它就安静地待在文档流里，连一丝动静都不会有。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
