position: sticky 在瀑布流中失效的主因是祖先容器设置了 overflow: hidden/auto 或使用 flex/grid 布局破坏了滚动上下文，导致锚定条件不满足；需改用 overflow: clip、避免干扰布局、正确设置 break-inside 或 grid-row 等方案修复。
为什么 position: sticky 在瀑布流里经常失效
不是浏览器不支持，而是瀑布流容器本身破坏了 sticky 的锚定条件。多列布局（columns）或 Grid Masonry 模式下，子项的“滚动上下文”可能被切断——比如父容器设了 overflow: hidden 或 overflow: auto，哪怕只是为防内容溢出，也会让所有子项的 position: sticky 退化为 relative。
常见现象：标题加了 top: 0，一滚动就消失；或者只在首屏短暂吸顶，滚几屏后突然掉下去。
- 逐层检查祖先节点，重点看
.waterfall、body、框架根容器（如#app）是否带overflow声明 - 把
overflow: hidden改成overflow: clip（Chrome/Firefox/Safari 16.4+ 已支持，不阻断 sticky） - 避免在瀑布流父容器上直接用
display: flex或display: grid—— 部分浏览器会干扰 sticky 的锚点计算
break-inside: avoid 和 position: sticky 能共存吗
能，但必须严格控制作用层级。多列布局中，break-inside: avoid 必须加在吸顶模块的**直接父元素**（即瀑布流子项）上，否则该模块可能被硬切成两半跨列显示，导致 sticky 失效或错位。
典型错误写法：.waterfall > .sticky-header { position: sticky; top: 0; }，但没给外层 .waterfall-item 加 break-inside: avoid。
立即学习“前端免费学习笔记（深入）”；
- 吸顶模块自身不要设
width: 100%—— 它会强制填满当前列宽，破坏列内自然流式行为 - 如果吸顶模块是卡片内的分类标题，确保它和卡片内容同属一个
.waterfall-item，且该 item 是break-inside: avoid的载体 - Grid Masonry 下（
grid-template-rows: masonry），break-inside无效，改用grid-row: span 1+align-self: start控制锚点
Grid Masonry 中实现吸顶的兼容性绕行方案
Chrome 132+ 支持 grid-template-rows: masonry，但 Safari 和 Firefox 尚未启用。若想用 Masonry 实现真正“行优先”的瀑布流吸顶，得做降级处理：
- 用
@supports (grid-template-rows: masonry)包裹 Masonry 吸顶规则，否则老浏览器会直接忽略整段样式 - 降级到多列布局时，吸顶模块需额外加
column-span: all（仅限块级元素），让它横跨全部列，否则会被卡在某一列顶部 - 图片加载完成前，Masonry 可能无法正确计算行高，导致吸顶位置偏移 —— 给图片加
height: auto+aspect-ratio（如aspect-ratio: 4/3）可缓解
吸顶后内容重叠或留白怎么避让
sticky 不脱离文档流，吸顶后仍占原始位置空间。后续卡片若没避让，就会从标题底下往上钻，或出现大片空白。
- 在吸顶模块后紧跟的第一个
.waterfall-item上加margin-top，值等于该标题的自然高度（含 padding/border） - 避免用固定像素值，改用相对单位：例如标题
font-size: 1.25rem+padding: 0.75rem 1rem，则写margin-top: calc(1.25rem + 1.5rem) - 不要用 JavaScript 动态改
height或插入空 div 占位 —— 这会干扰浏览器对瀑布流列高的自动计算，引发错行
真正难的不是加 position: sticky，而是让整个瀑布流容器保持“干净”的滚动上下文，同时不破坏列高自适应逻辑。很多问题表面是 sticky 失效，根子在祖先容器的 overflow 或布局模式切换时的 CSS 层级冲突。
