position: sticky 需同时满足三个条件：显式声明 top 或 bottom、父容器不切断滚动上下文、浏览器支持该特性；缺一则完全失效，最常见原因是遗漏 top/bottom 值导致回退为 relative。
position: sticky 不是设了就粘，它必须同时满足三个硬性条件：显式声明 top 或 bottom（不能只写 position: sticky）、父容器不切断滚动上下文、浏览器支持该特性。缺一就会完全失效。
为什么写了 position: sticky 却完全没反应
最常见原因是只加了 position: sticky，但漏掉 top 或 bottom 偏移值——此时浏览器直接按 position: relative 渲染，毫无粘性行为。
-
top: 0是最稳妥的起点，尤其适合导航栏吸顶；top: 20px表示滚动到距视口顶部 20px 时才开始吸附 - 不能同时写
top和bottom，部分浏览器会直接忽略整个 sticky 声明 - 检查开发者工具的 “Computed” 面板，确认最终生效的
position值是不是sticky；如果不是，说明被祖先干扰了
哪些父容器样式会让 position: sticky 失效
position: sticky 的吸附范围由**最近的、可滚动的、非 static 定位祖先**决定。一旦父级设置了某些属性，就会切断这个上下文，导致元素提前停住、错位或完全不动。
-
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 是否恢复
表格首列固定时 position: sticky 怎么写才不遮盖、不错位
在 <table> 中固定首列（如 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启用水平滚动，并加user-select: none提升体验
IE 和 Safari 的兼容性坑怎么绕过
position: sticky 在 IE 全系列中完全无效；iOS Safari 15.4 之前存在滚动跳变、吸附延迟等渲染问题——不是“不支持”，而是“支持得不稳”。
- 对不支持的浏览器，可用
@supports not (position: sticky)回退为position: relative或position: fixed（注意fixed会脱离文档流） - 轻量级 JS 方案：监听
scroll+getBoundingClientRect()模拟，或引入stickybits库 - 用 Intersection Observer API 更高效，但需注意触发时机依赖占位元素位置
- 别忽略一个细节：sticky 元素必须有明确高度或内容撑开，空的
<header></header>加了top: 0也不会吸附
