sticky元素跑出父容器边界，是因为浏览器只将“最近的、有明确高度且可滚动”的祖先视为滚动上下文；若父容器未设height/max-height或未触发溢出，sticky不生效；中间祖先设overflow: auto会锁死粘性范围；height: 100vh会截断作用域，应改用min-height: 100vh；sticky仍占文档流空间，需为后续元素预留margin-top或padding-top；ios safari旧版本对bottom支持差，属引擎限制。
sticky元素跑出父容器边界，是因为滚动上下文错了
浏览器不会自动把父容器当作sticky的滚动容器——它只认「最近的、有明确高度且可滚动」的祖先。如果父容器没设height或max-height，或者内容没撑出溢出，position: sticky就根本不会被触发，元素看起来像“脱离了控制”。更糟的是，如果中间某层祖先加了overflow: auto（哪怕内容没溢出），sticky就会被锁死在那一小块里，一滚到底就消失。
- 用开发者工具选中sticky元素，在
Computed面板看position值：滚动时如果变回relative，说明上下文丢失了 - 逐级检查祖先的
overflow、transform、filter——任意一个都会让sticky彻底失能 - 临时给父容器加
outline: 1px solid red，确认它真有渲染高度（常见于flex容器塌陷）
父容器用了height: 100vh，sticky滚动一半就掉下去
这是最典型的“粘性范围被物理截断”：height: 100vh把sticky的作用域严格限制在固定高度内。哪怕页面内容有300vh高，sticky也只在前100vh生效，之后就退回文档流。
- 把
height: 100vh换成min-height: 100vh，既保底显示，又允许随内容伸展 - 避免
max-height: 100vh——它会直接砍掉超出部分，sticky连触发机会都没有 - 如果必须限制高度，用
max-height: 70vh+overflow-y: auto，确保滚动容器明确落在父级
sticky元素粘住后，后面的内容叠上来了
sticky不是脱离文档流的fixed，它“粘住”时仍占据原始位置。如果后续兄弟元素没预留空间，就会视觉上重叠或错位。
- 给sticky元素的下一个兄弟元素加
margin-top，值等于sticky元素的高度（比如margin-top: 48px） - 更稳妥的做法是给整个内容区加
padding-top: 48px，而不是靠margin推一个块 - 别对sticky元素本身设
transform或z-index: -1，这会破坏粘性或导致层级异常
iOS Safari下sticky到底部就消失，不是写错了
iOS Safari 15.3及更早版本对bottom支持极差，即使结构完全正确也会静默退化为relative。这不是配置问题，是引擎限制。
- 对iOS Safari用
@supports (position: sticky)做降级：不支持时改用position: relative+ JavaScript监听scroll手动切换 - 避免依赖
bottom: 0做页脚吸附；改用top+ 动态margin-bottom补偿（需JS） - 注意：Safari 16+已修复大部分问题，但企业内网仍可能遇到旧版本
真正卡住人的往往不是sticky语法本身，而是它对布局环境的隐式依赖——没有显式滚动上下文，它就不工作；没有真实高度，它就退化；没有预留空间，它就遮挡内容。这些条件缺一不可，且无法通过CSS单独验证，必须结合DevTools逐层排查computed值。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
