safari 6.1–13.1完全不识别position: sticky，需同时声明position: -webkit-sticky和position: sticky；ie全系原生不支持，polyfill存在性能与兼容性缺陷。
sticky定位在Safari 6.1–13.1中根本不会解析
不是“不生效”，而是浏览器压根不认识position: sticky这个声明——Safari 直到 14.0（2020年9月发布）才原生支持，此前所有版本（包括 Safari 13.1）遇到该属性会直接忽略，连降级 fallback 都不会触发。你写的top: 0或z-index一并被丢弃，元素退回到position: static行为。
-webkit-sticky只对Safari 6.1–13.1有效，且必须成对出现
加-webkit-sticky不是“锦上添花”，而是唯一能让旧 Safari 认出 sticky 的写法。但注意两点：
- 必须同时声明
position: -webkit-sticky和position: sticky，否则现代浏览器会因前缀覆盖而失效 -
-webkit-sticky在 Safari 14+ 中已被废弃，但保留无害；而 Chrome / Firefox 从不识别它，所以不会冲突 - 仅加前缀还不够：Safari 6.1–8.0 不支持
z-index在非定位父容器下的正确层级计算，若 sticky 元素的父级没设position: relative，它可能被遮挡
正确写法示例：
.header {
position: -webkit-sticky;
position: sticky;
top: 0;
z-index: 10;
}
IE全系（含IE11）无法通过任何前缀或JS模拟实现sticky
IE 完全不支持position: sticky，也不识别-ms-或-webkit-前缀变体。Polyfill 如stickybits或react-stickynode只能靠 JS 监听 scroll 事件 + transform或top动态重排，但存在明显缺陷：
- 滚动性能差：频繁触发 layout/reflow，尤其在长列表中卡顿明显
- 与 CSS
will-change、contain等优化机制冲突 - 无法响应
resize或 DOM 动态插入，需手动 re-init - IE10–11 本身不支持
transform，所以基于transform: translateY()的方案在 IE 中直接回退为top，引发抖动
@supports不能用于检测sticky兼容性
@supports (position: sticky)在 Safari
更可靠的做法是用 JS 检测：
const supportsSticky = CSS.supports('position', 'sticky') ||
CSS.supports('position', '-webkit-sticky');
if (!supportsSticky) {
// 启用 JS fallback 或添加 class 触发备用样式
document.body.classList.add('no-sticky');
}
注意：CSS.supports在 IE11 中支持，但只认标准语法，不认-webkit-前缀，所以必须手动补上-webkit-sticky判断。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
