position: sticky 不是“设了就粘”，必须配 top（或 bottom）才生效，且父容器不能切断滚动上下文；最常见失效原因是只写 position: sticky 而未设 top/bottom，或祖先元素设置了 overflow:hidden/auto/scroll、transform、filter 等干扰属性。
position: sticky 不是“设了就粘”，必须配 top（或 bottom）才生效，且父容器不能切断滚动上下文，缺一不可。
为什么写了 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> 中用 <code>position: sticky 固定首列（如 ID 列），光写 left: 0 不够，容易被后续列覆盖或计算失准。
- 必须为
<table> 设置 <code>table-layout: fixed，否则列宽由内容撑开，sticky 锚点计算错误 - 固定列需同时作用于
<th> 和 <code><td>：<code>.my-table th:first-child, .my-table td:first-child -
z-index必须显式设置且足够高（推荐 ≥ 10），否则会被右侧单元格覆盖 - 外层容器需设
overflow: auto启用水平滚动，并加user-select: none提升体验 -
sticky元素必须有明确高度或内容撑开，空的<header></header>加了top: 0也不会吸附 - 想让
right或left相对父容器计算，父容器必须加position: relative创建参照系 - 用
@supports not (position: sticky)回退时，慎用position: fixed，它会脱离文档流，可能造成后续内容上跳 - 移动端广告位推荐
top: 20px而非top: 0，避免紧贴地址栏或导航栏，也留出进入视口再吸附的缓冲
兼容性兜底和容易被忽略的细节
IE 全系列完全不支持；iOS Safari 15.4 之前存在滚动跳变、吸附延迟等渲染问题——不是“不支持”，而是“支持得不稳”。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
