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就会被锁死在那一小块里，一滚到底就消失。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 给父容器设
max-height: 600px或min-height: 100vh，再加overflow-y: auto（别用hidden） - 用开发者工具选中sticky元素，在Computed面板看
position值：滚动时如果变回relative，说明上下文丢失了 - 逐级检查祖先的
overflow、transform、filter——任意一个都会让sticky彻底失能
父容器用了height: 100vh，sticky滚动一半就掉下去
这是最典型的“粘性范围被物理截断”：浏览器把sticky的作用域严格限制在height: 100vh这个固定高度内。哪怕页面内容有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 position: fixed; bottom: 0;
- 避免在父容器上用
-webkit-overflow-scrolling: touch或transform，微信WebView和部分安卓定制浏览器也会静默失效 - 真要兼容老设备，改用
IntersectionObserver监听getBoundingClientRect().bottom，手动切换class
height锁死、被transform隔离、被overflow: hidden屏蔽，甚至压根没出现在滚动路径上。 
