devtools中computed position为static，说明sticky已被规范强制降级为static；根本原因是某祖先设置了overflow:hidden/auto/scroll且自身不可滚动，需逐级检查至body的overflow值，用clip-path:inset(0)替代或提升dom层级修复。
DevTools里computed position是static，说明sticky已被降级
这不是浏览器不支持，而是规范行为：只要某个祖先元素设置了 overflow: hidden、overflow: auto 或 overflow: scroll，哪怕它根本没滚动条、内容也没溢出，sticky 元素就会被强制降级为 position: static。你写的 position: sticky 和 top: 0 依然在 Styles 面板里，但 Computed 面板里 position 值已经是 static——这意味着浏览器压根没启动 sticky 逻辑。
常见藏雷位置包括：.ant-modal 外层 wrapper、.card 根节点、Tab 切换容器、Swiper 轮播壳、甚至 CSS-in-JS 动态注入的内联样式。别只查直接父级，往上点到 body 都得看一遍 overflow-x 和 overflow-y 的计算值。
- 临时验证：给某层祖先加
overflow: visible !important，如果 sticky 立刻恢复，问题就坐实了 - 用 Layout 面板确认该祖先的 “Actual height” 是否真大于设定高度（比如
height: 100vh但内容撑高了） - 注意
transform、filter、will-change也会创建新层叠上下文，间接切断粘性链
必须保留overflow:hidden时，用clip-path: inset(0)替代
overflow: hidden 常用于裁剪圆角图片、约束弹窗边界或配合动画效果，硬删会破 UI。此时最稳妥的替代方案是 clip-path: inset(0)：视觉裁剪效果完全一致，但不创建新 BFC，也不截断滚动上下文，sticky 链保持完整。
写法很简单：overflow: hidden → clip-path: inset(0)。现代浏览器全覆盖（Chrome 55+、Firefox 54+、Safari 15.4+、Edge 79+），2026 年已无需兼容 IE。
如果你了解HTML，CSS和JavaScript，您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造，可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Android友好的网络应用程序，然后转换与自由PhoneGap框架到一个原生的Android应用程序。了解为什么设备无关的移动应用是未来的潮流，并开始构建应用程序，提供更
- 若需支持 IE，只能重构 DOM 或改用 JS 模拟，但代价高、维护难
-
clip-path不影响盒模型尺寸，不会引发重排，性能友好 - 避免和
border-radius同时用在同一个元素上导致渲染异常（可提一层 wrapper 分离）
父容器是flex/grid且没设高度，sticky找不到锚定参考
Flex 或 Grid 容器若没显式设置 height、max-height 或 min-height，即使子项撑高了，浏览器也可能无法识别出“可滚动区域”，sticky 就失去锚定依据。更隐蔽的是：align-items: center 或 baseline 会拉偏 sticky 元素的“顶部基准线”，导致 top: 0 实际失效。
- 把
height: 100vh改成min-height: 100vh，允许内容自然撑高 - 在 flex 容器上加
align-self: flex-start或显式设align-items: flex-start - 避免把 sticky 元素放在
display: inline-flex或display: inline-grid的父容器里——它们不产生 BFC，sticky 直接被忽略 - sticky 元素本身不能是
<span></span>、<a></a>这类默认display: inline的标签，必须显式设display: block或display: inline-block
sticky被包在overflow:auto的局部滚动容器里
当 sticky 元素被嵌套在 overflow: auto 的父容器中时，它会被锚定在这个局部容器内，而不是整个视口。结果就是：只在那个小区域里“粘”，一旦超出容器边界，立刻回归文档流——表现为滚动一段后突然消失或跳回。
典型场景：.sidebar 设了 position: sticky; top: 0，却被包在一个 overflow: auto 的卡片里，它就只能粘在卡片内部，而非页面左侧。
- 先验证该祖先是否真能滚动：鼠标直接滚它，看是否响应；不响应，说明它没形成有效滚动上下文
- 解决方案不是调
overflow，而是把 sticky 元素提到更高层级，挂到一个position: relative且overflow: visible的干净 wrapper 下 - 如果 DOM 锁死无法改，可用
position: fixed+getBoundingClientRect()监听滚动模拟，但要注意视口缩放、页面重排和性能损耗
真正卡住 sticky 的，往往不是 top 没写对，而是某一层祖先悄悄加了 overflow: hidden 或用了 transform，又或者 flex 容器缺了 min-height。这些干扰项通常藏得深、不报错、也不警告，只能靠 Computed 面板逐层点开看 overflow 值来揪出来。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
