Chrome 56+等主流浏览器已原生支持position: sticky且无需前缀，强行添加-webkit-sticky等前缀反而无效甚至导致解析失败；真正影响生效的是父容器的overflow、transform等限制。
Chrome 56+ 之后根本不需要前缀
现在主流浏览器对 position: sticky 的原生支持已经很稳，Chrome 56、Firefox 54、Safari 13.1、Edge 79+ 全部无需前缀。强行加 -webkit-sticky 或 -ms-sticky 不仅无效，还可能干扰解析——尤其是 Safari 旧版会把带前缀的值当非法声明直接丢弃。
常见错误现象：position: -webkit-sticky 写上去没反应，开发者工具里看到该样式被划掉（invalid value）；或者只在某个浏览器生效，换个设备就失效。
- 只在 iOS 12.2–13.0 的 Safari 中需要
-webkit-sticky（但这些系统已占比极低） - Android WebView 4.4–6.0 需要
-webkit-sticky，不过这类环境基本不维护新功能 - 所有现代构建工具（Vite、Webpack + PostCSS）默认不补
position前缀，因为 CanIUse 数据显示它不属于“需自动补全”的属性
真正决定 sticky 是否生效的是父容器限制
比前缀更常导致失败的原因是：父级元素设置了 overflow: hidden、overflow: auto 或 transform 等创建了新的层叠上下文或 BFC，这会让 sticky 失效——不是兼容性问题，而是 CSS 规范本身的要求。
使用场景：做表格表头吸附、侧边栏滚动跟随、导航栏吸顶时，经常发现“写了 sticky 却纹丝不动”。
立即学习“前端免费学习笔记（深入）”；
- 检查最近的非
static定位祖先是否同时满足：无overflow裁剪、无transform、无perspective、无filter - 如果必须用
overflow: auto（比如卡片内滚动），就把 sticky 元素提到更高层级，绕过这个容器 - Firefox 对
min-height和 sticky 的交互更敏感，有时设min-height: 0到父容器能修复
IE 和部分老 Android 必须降级为 JavaScript 模拟
IE 完全不支持 position: sticky，任何前缀都无效。Android 4.4–5.1 的原生浏览器也一样。这时候不能靠 CSS 补丁，得换方案。
性能影响明显：滚动时频繁读取 getBoundingClientRect() 可能掉帧，尤其列表长、DOM 深时。
- 优先用轻量库如
stickybits（不依赖框架，仅 2KB），它只监听 scroll，不劫持 touchmove - 避免在 React/Vue 组件里手写
window.addEventListener('scroll')，容易漏卸载或重复绑定 - 若只针对表头，
IntersectionObserver+position: fixed是更流畅的替代，但要注意 fixed 元素脱离文档流带来的布局重排
移动端 Safari 的 top 值解析有偏差
iOS Safari（特别是 15.x）对 top 的计算偶尔会把安全区（notch）、底部指示器高度算进去，导致 sticky 元素“卡住半截”。这不是 bug，是它把视口当作含安全区的逻辑区域来处理。
可给出简短示例：
header {
position: sticky;
top: env(safe-area-inset-top); /* 比单纯 top: 0 更稳妥 */
}-
env(safe-area-inset-top)在支持的设备上返回刘海高度，不支持时 fallback 为 0 - 不要用
top: constant(safe-area-inset-top)（已废弃） - 如果内容区域本身已有 padding-top，叠加
env()可能过量，建议用 calc() 控制：top: calc(env(safe-area-inset-top) + 12px)
事情说清了就结束。最麻烦的从来不是加不加前缀，而是你以为 sticky 生效了，其实只是父容器刚好没拦着它。
