父容器 overflow: hidden/auto/scroll 会直接使 sticky 退化为 static，因其创建滚动上下文边界却不可滚动，导致粘性链被截断；需逐级检查至 body 的 computed overflow 值，用 clip-path: inset(0) 替代或提升 dom 层级修复。
父容器 overflow: hidden/auto/scroll 直接封死 sticky
只要 sticky 元素的任意祖先（包括爷爷级、甚至 html）设置了 overflow: hidden、overflow: auto 或 overflow: scroll，sticky 就会退化为 static——不是“偶尔不粘”，而是彻底失效，DevTools 里看到的 position 计算值就是 static。
常见藏雷位置：.ant-modal-wrapper、.card 根节点、Tab 切换容器、Swiper 外壳，它们常默认加 overflow: hidden 防溢出，却顺手把 sticky 锁死了。
- 用 DevTools 选中 sticky 元素，逐级点开
parentElement直到body，挨个看 Computed 面板里的overflow值 - 临时给疑似卡住的那层加
overflow: visible !important，如果 sticky 立刻恢复，问题就定位准了 - 别只查直接父级；有时是
html上误加了overflow-x: hidden，尤其在移动端适配或重置样式里
height: 100vh 截断滚动范围导致中途失效
给 sticky 的父容器写 height: 100vh 是最隐蔽的坑：它强制把“粘性作用域”钉死在视口高度内。一旦内容撑高，超出部分的滚动实际发生在 body 或 html，而 sticky 只认“最近的可滚动祖先”，此时它已不在那个祖先里了。
现象是：滚动前半段正常，过了一屏后 sticky 突然消失或跳回文档流位置。
使用 Puppeteer + Chrome 将 HTML 渲染为中文 PDF，自动处理图表等待、Tab 展开、动画、测高、白边消除、防分页，适用于看板、报表、网页和交互图表转 PDF。
- 把
height: 100vh改成min-height: 100vh，保留最小高度同时允许内容自然撑高 - 确保该父容器本身能产生滚动（比如子内容总高度 > 容器高度），否则 sticky 没空间“相对滚动”
- 避免对 sticky 元素的任意父级设
max-height类固定高度限制
transform/filter 父容器创建新层叠上下文
只要 sticky 元素的父级（甚至更上层）用了 transform、filter 或 will-change，就会隐式创建新层叠上下文，导致 sticky 的“锚点”被重置到这个新边界，而不是你预期的滚动容器或视口。
Safari 尤其敏感，iOS Safari 15.0–15.3 版本下几乎必挂。
- 把
transform、filter移到 sticky 元素自身上（而非其父容器） - 若父容器必须动效，优先用
translateZ(0)替代transform: translateX()，兼容性稍好 - 绝对不要在 sticky 元素父级上同时用
transform和overflow: visible——两者叠加，sticky 几乎必失效
sticky 元素不是滚动容器的直系子元素
sticky 行为依赖“最近的、可滚动的、非 static 定位祖先”，但这个祖先必须是它的**直接父级**（或更近的可滚动容器）。中间插一层 display: flex 或 display: grid 且未触发 BFC，或者父级是 inline-flex/inline-grid，都可能导致 sticky 找不到有效锚点。
典型场景：表格首列固定时，<th> 套在 <code><tr> 里，<code><tr> 又套在 <code><tbody> 里——<code><th> 不是 <code><table> 的直系子元素，<code>left: 0 就容易错位或失效。
- 确保 sticky 元素是滚动容器的**直系子元素**，例如
#scroll-container > .sticky-item - 表格中固定列需同时作用于
th:first-child和td:first-child，并设table-layout: fixed+ 显式z-index - Flex/Grid 容器本身可作为 sticky 边界，但需确认其自身未被更上层的
overflow或transform锁死
真正麻烦的不是某一个条件不满足，而是多个干扰项叠加出现——比如父容器既设了 overflow: hidden，又用了 transform，还套着一层 flex 包裹。排查时得一层层剥，不能只盯着直接父级。DevTools 的 Layout 面板里 “Sticky constraint rectangle” 能直观显示它实际绑定的范围，比猜更可靠。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
