sticky失效时第一个要查父容器overflow值，因任意祖先设overflow:hidden/auto/scroll会截断粘性行为，使其退化为static；需逐级检查至body，并可用clip-path: inset(0)替代overflow:hidden。
sticky失效时，第一个要查的是父容器overflow值
绝大多数position: sticky不生效，不是写错了样式，而是被某层祖先的overflow: hidden、overflow: auto或overflow: scroll悄悄截断了。浏览器规范明确要求：只要sticky元素的最近非static定位祖先设置了这三者之一，它就会退化为static——你看到的“不动”，其实是计算后直接被忽略。
常见错误现象：top: 0写了，DevTools里也显示声明存在，但computed position却是static；滚动时元素完全随文档流移动，毫无吸附感。
- 用DevTools选中sticky元素，逐级点开
parentElement，直到html，挨个看Computed面板里的overflow值 - 重点盯防模态框（
.ant-modal）、卡片（.card）、Tab容器、轮播图外层wrapper——这些组件常默认加overflow: hidden - 临时验证：给疑似“卡住”的那层父级加
overflow: visible !important，如果sticky立刻恢复，问题就定位准了
必须保留overflow:hidden时，怎么绕过限制
有些场景下overflow: hidden不能删，比如裁剪圆角图片、防止内容撑破卡片、或框架强制注入。硬删会破坏UI，这时得换思路。
- 优先用
clip-path: inset(0)替代overflow: hidden，它能实现视觉裁剪，但不创建新滚动上下文，对sticky无干扰 - 若必须用
overflow: auto（如内部有横向滚动表格），就把sticky元素**提一层**：在该overflow容器外，套一个position: relative的wrapper，再把sticky元素挂进去 - 极端情况（如无法改DOM结构），可用
position: fixed+getBoundingClientRect()监听滚动模拟，但要注意视口缩放和性能损耗
父容器高度不足也会让sticky“没地方粘”
sticky不是全局吸顶，它只在**最近的、有高度的滚动容器内生效**。如果父容器高度≤sticky元素自身高度，或者高度是0（比如由display: contents或浮动导致塌陷），浏览器根本算不出“粘住”的边界。
- 给父容器加
min-height: 1px有时就能救活——这不是hack，是告诉浏览器“这里至少有一行可滚动空间” - Flex/Grid容器若设了
flex: 1，要确认它的父级给了明确高度约束（比如height: 100vh），否则flex子项不会触发滚动上下文 - 避免把sticky元素放在
display: inline-flex或display: inline-grid的父级里——inline级容器不产生块格式化上下文（BFC）
iOS Safari下sticky突然失灵怎么办
Safari 15.4之前，position: sticky在iOS上属于“玄学功能”：可能滚动卡顿、吸附后突然跳回顶部、甚至完全静默失效。即使DOM结构和CSS完全合规，也可能白屏式不响应。
- 别对sticky元素的任何祖先设
transform、filter或will-change——Safari会因此创建新层叠上下文，直接切断sticky链 - 动态插入的sticky元素（如React中useEffect里append），可能因渲染时机晚于布局计算而初始不生效；可加
requestAnimationFrame(() => el.style.position = 'sticky')强制重排 - 底线方案：检测
!window.CSS || !CSS.supports('position', 'sticky')或UA含iOS.*Safari且版本position: fixed + JS滚动监听
真正难的不是写position: sticky，而是让整个祖先链都“守规矩”：不截断、不塌陷、不乱建层叠上下文。每次失效，本质都是浏览器在说：“我找不到那个能让你粘住的滚动舞台。”
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
