position: sticky 须同时满足设置top/bottom、父容器不破坏滚动上下文、浏览器支持三条件，缺一不可；常见失效原因是未设top/bottom或父级存在overflow/transform等干扰属性。
直接说结论：position: sticky 不是“设了就粘”，它必须配合 top（或 bottom）、父容器不破坏滚动上下文、且浏览器支持，三者缺一不可。很多“没反应”其实是漏了其中一环。
为什么写了 position: sticky 却完全没效果
最常见原因是只写了 position: sticky，没加 top 或 bottom —— 这个属性本身不触发任何行为，纯粹是个“待命状态”。浏览器看到它，就像看到 position: relative 一样处理，直到你指定偏移值。
-
top: 0是最常用、最稳妥的起点，尤其用于导航栏吸顶 -
top: 10px表示滚动到距离视口顶部 10px 时开始吸附 - 不能同时写
top和bottom，行为未定义，部分浏览器会直接忽略 sticky - 检查开发者工具的“Computed”面板，确认最终生效的
position值是不是sticky；如果不是，说明被祖先元素的transform、filter或overflow干扰了
父容器哪些样式会让 position: sticky 失效
position: sticky 的吸附范围由**最近的、可滚动的非 static 定位祖先**决定。一旦父级设置了某些属性，就会“截断”这个滚动上下文，导致 sticky 元素提前停住，甚至完全不动。
-
overflow: hidden、overflow: auto、overflow: scroll都会创建新的块格式化上下文，使 sticky 失效 -
transform: translateZ(0)、filter: blur(1px)、perspective: 1px等隐式创建层叠上下文的属性，同样禁用 sticky（Safari 尤其敏感） - Flex 容器中若父级设了
align-items: stretch，旧版 Safari 可能忽略top偏移 - 临时排查方法：用开发者工具逐级关闭父元素的
overflow和transform样式，看 sticky 是否恢复
怎么让 sticky 元素相对父容器右上角定位
position: sticky 的 right 或 left 值，默认参考的是视口，不是父容器。想让它贴着父容器右边 25px 下沉，必须让父容器成为“定位上下文”。
- 给父容器加
position: relative（无需top/left偏移，它只是创建参照系） - sticky 元素再写
top: 0; right: 25px，此时right才真正相对于父容器右边界计算 - 注意：
right单独存在不触发 sticky，必须和top或bottom搭配使用 - 如果父容器本身有
overflow: hidden，即使加了position: relative，sticky 仍可能被裁剪——得先解决溢出问题
哪些场景下别硬套 position: sticky
它不是万能固定方案。有些需求从原理上就不适配 sticky 的行为逻辑，强行用只会掉坑里。
- 页脚（
footer）几乎无法靠position: sticky实现“粘底”，因为它的触发依赖“滚动中进入视口”，而页脚通常在文档末尾，没机会“进入”——该用 Flexbox 或 Grid 布局撑开内容区 - IE 全系列完全不支持，Safari 15.4 之前有抖动/延迟，项目若需兼容这些环境，得准备 JS 降级方案
- 表格固定列时，
<tbody> 中的单元格要设 <code>left，但不能设top；而<thead> 中的单元格要同时设 <code>top和left，混用容易错乱 - 侧边栏在 Flex 布局中，记得加
align-self: flex-start，否则top偏移会被align-items拉偏
真正麻烦的从来不是写那一行 position: sticky，而是搞清它在哪一级祖先被悄悄禁用了，以及它到底在跟谁对齐。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
