sticky失效主因是父容器未提供滚动上下文：height: 100vh截断滚动、overflow非visible、transform/filter创建新层叠上下文、父高≤sticky高均会导致粘性失效，需逐级排查祖先元素的overflow、高度及变换属性。
sticky元素父容器设了height: 100vh就失效
这不是CSS写错了，而是父容器根本没给sticky元素“滚动的机会”。height: 100vh强制截断内容高度，导致滚动行为被移交到body或html，而sticky只认“最近的、实际在滚动的祖先”——一旦它的直接父级不滚动，它就彻底静默。
- 把
height: 100vh换成min-height: 100vh，保留内容撑高空间 - 确保该父容器子内容总高度 > 容器自身高度（否则没滚动空间）
- 别在
.page、.wrapper这类布局容器上用height硬限高
overflow非visible直接禁用sticky
只要sticky元素任意一个祖先设置了overflow: hidden、overflow: auto、overflow-x: hidden，sticky就会立即失效。这不是兼容性问题，是CSS规范明文规定的：sticky必须绑定在overflow: visible的滚动上下文中。
- 逐级检查从
body到sticky父级的所有容器，确认overflow计算值 - 特别注意
body上是否误加了overflow-x: hidden（为防横向滚动条） - 用
overflow: clip替代hidden也不行——它同样创建新滚动上下文
父容器用了transform或filter就断粘性
这些属性会创建新的层叠上下文（stacking context），相当于给sticky元素“重划管辖范围”，让它把父容器边界当成新视口，而不是你预期的整个页面滚动区。
- 把
transform、filter、will-change移到sticky元素自身上（而非父级） - 若父容器必须动效，优先尝试
translateZ(0)代替transform: translateY() - 避免在同一个父容器上同时设
transform和overflow: visible——叠加后sticky几乎必挂
父容器高度 ≤ sticky元素高度时表现异常
sticky需要“活动范围”：它得先相对滚动，再触发固定。如果父容器刚好和sticky元素一样高，或者更矮，它就没有空间完成这个切换过程，结果要么不粘，要么粘住后立刻消失。
立即学习“前端免费学习笔记（深入）”；
- 父容器高度必须严格大于sticky元素自身高度（含padding、border）
- 浮动元素（
float: left）可能导致父容器高度塌陷，间接触发此问题 - 用
display: flex或display: grid替代浮动布局，可天然规避高度塌陷
top: 0没写对，而是某个看不见的overflow: hidden藏在第三层父容器里，或者min-height被height覆盖了。调试时别只盯着sticky元素本身，得顺着DOM往上摸三层。 
