父容器 computed height 为 0 时 sticky 直接不启动，浏览器第一步检查父容器高度是否大于 0，若为 0px 则跳过 sticky 逻辑、降级为 static；常见原因包括上层未设 height/min-height、display: contents、内容不足且无撑高手段，临时加 min-height: 1px 可验证。
父容器 computed height 为 0 时 sticky 直接不启动
浏览器判断 position: sticky 是否生效，第一步就检查直接父容器的 **computed height 是否大于 0**。如果 DevTools Layout 面板里显示父容器高度是 0px，sticky 就被跳过，连 top 值都不会读，最终计算出的 position 是 static。
常见导致 height 为 0 的场景：
-
flex: 1子项但上层容器没设min-height或height - 父级用了
display: contents或inline-flex，不产生 BFC - 纯文字流内容太少，又没加
min-height、padding等撑开容器 - Grid 布局中行轨道未定义高度，且子项用
align-items: center悬空
临时验证方法：给父容器加 min-height: 1px 或 border: 1px solid red，看 sticky 是否立刻恢复——这不是 hack，是明确告诉浏览器“这里可以滚”。
父容器高度 ≤ 内容总高度，但没溢出就不滚动
sticky 不是“写了就粘”，它只在**真实发生滚动**时才激活。而滚动发生的前提，是父容器的子内容总高度 > 容器自身高度（即必须有溢出）。如果容器设了 height: 200px，里面只有一个高 250px 的 sticky 元素，那整个容器根本不会出现滚动条，sticky 就没机会触发。
立即学习“前端免费学习笔记（深入）”；
典型错误写法：
- 给 sticky 元素本身设
height: 100%，却没约束父容器高度 - 在
overflow-y: auto容器里只放一个 sticky 元素，没其他内容撑高 - 用
flex: 1把父容器“填满”，导致无剩余空间供滚动
正确做法是显式设 max-height + overflow-y: auto，并确保子内容（包括非-sticky 元素）总高度 > max-height。
height: 100vh 锁死滚动上下文，比 height: 0 更隐蔽
height: 100vh 看似占满视口，实则是个硬性截断：它强制容器高度等于当前视口，哪怕子内容总高 3000px，容器也不会溢出、不产生滚动条，sticky 失去触发前提。很多开发者以为“有内容+有高度=能滚”，结果 sticky 滚到一半就掉下去。
修复方式很简单：
- 把
height: 100vh改成min-height: 100vh，允许容器随内容自然扩展 - 避免
height: 100%，它依赖父级高度，容易链式塌陷为height: 0 - 在 Flex/Grid 布局中，别给兄弟项加
flex: 1同时挤压 sticky 区域高度计算
测试阶段加 outline: 2px solid blue 能快速确认容器是否真有滚动能力——有滚动条才说明上下文成立。
祖先 overflow 属性静默截断滚动链
sticky 向上查找“最近可滚动祖先”时，只要遇到任意一层写了 overflow: hidden、overflow: auto 或 overflow: scroll，就会立刻锚定到那一层。但如果该层本身不滚动（比如高度刚好、内容没撑开），sticky 就退化为 static，DevTools 里 computed position 显示为 static 就是这个原因。
高频踩坑位置：
- 模态框（
.ant-modal）、卡片（.card）、Tab 容器、Swiper wrapper - 外层
div加了overflow-x-hidden做布局裁剪 - UI 组件内部自带隐藏的
overflow
排查技巧：逐级点开父节点，在 DevTools Computed 面板查 overflow 最终值；临时加 overflow: visible !important 到疑似父级，若 sticky 恢复，问题坐实。不能删 overflow: hidden？可用 clip-path: inset(0) 替代，视觉一致但不创建新 BFC。
真正容易被忽略的是：sticky 的生效不依赖你写了多少样式，而取决于浏览器是否认定“这里正在发生滚动”。哪怕所有 CSS 都写对了，只要滚动上下文没建立起来，它就只是个普通块元素。
