position: sticky必须配合top/bottom等偏移值才生效，仅设该属性浏览器按relative处理；父容器含overflow/transform会切断滚动上下文致失效；IE不支持，Safari旧版存在抖动。
position: sticky 必须配 top 或 bottom 才生效
只写 position: sticky 不会触发任何粘性行为，浏览器直接当 position: relative 处理。它本质是个“待命状态”，必须搭配 top（最常用）、bottom、left 或 right 中的至少一个值才能激活。
常见错误现象：样式写了，开发者工具里也看到声明了 position: sticky，但滚动完全没反应——八成是漏了 top: 0 这类偏移值。
-
top: 0是最稳妥的起点，尤其适合导航栏吸顶 -
top: 20px表示滚动到距视口顶部 20px 时开始吸附，可避免紧贴浏览器地址栏或页面 header - 不能同时设
top和bottom，行为未定义，部分浏览器会直接忽略整个 sticky 声明
父容器 overflow / transform 会让 sticky 失效
position: sticky 的吸附范围由**最近的、可滚动的、非 static 定位祖先**决定。一旦父级设置了某些属性，就会切断这个滚动上下文，导致 sticky 元素提前停住、错位，甚至完全不动。
典型干扰样式包括：
立即学习“前端免费学习笔记（深入）”；
-
overflow: hidden、overflow: auto、overflow: scroll—— 创建新块格式化上下文，sticky 直接失效 -
transform: translateZ(0)、filter: blur(1px)、perspective: 1px—— 隐式创建层叠上下文，Safari 尤其敏感 - Flex 容器中若父级设了
align-items: stretch，旧版 Safari 可能忽略top偏移
临时排查方法：用开发者工具逐级关闭父元素的 overflow 和 transform 样式，看 sticky 是否恢复；确认“Computed”面板中最终生效的 position 值是否真是 sticky。
表格首列固定需额外注意 table-layout 和 z-index
在 <table> 中用 position: sticky 固定首列（如 ID 或名称列），光写 left: 0 不够，容易被后续列遮盖或错位。
- 必须为
<table>设置table-layout: fixed，否则列宽由内容动态撑开，sticky 锚点计算失准 - 固定列需同时作用于
<th>和<td>：例如.my-table th:first-child, .my-table td:first-child -
z-index必须显式设置且足够高（推荐 ≥ 10），否则会被右侧单元格覆盖 - 外层容器需设
overflow: auto启用水平滚动，且禁止内部文本选中提升体验
IE 不支持，Safari 旧版有抖动，兼容性要兜底
position: sticky 在 IE 全系列中完全无效；iOS Safari 15.4 之前存在滚动跳变、吸附延迟等渲染问题，并非“不支持”，而是“支持得不稳”。
生产环境建议分层处理：
- 现代浏览器：直接用
position: -webkit-sticky; position: sticky; top: 0; - 不支持 sticky 的环境（如 IE）：用
IntersectionObserver监听元素进入视口时机，比纯scroll事件更轻量、无重排风险 - 若需强兼容旧 WebView 或复杂嵌套滚动，可引入轻量库如
sticky-js，或手动监听scroll+ 切换position: fixed类，但务必同步预留占位防止内容上跳
真正容易被忽略的是：sticky 在打印样式表（@media print）中默认退化为 relative，而 fixed 仍会强制定位——如果你的页面需要良好打印输出，这点必须提前验证。
