sticky定位失效的常见原因包括：父容器无明确高度、父级设置overflow隐藏、在flex/grid容器中未设align-self、使用table显示模式或transform非none的祖先元素、未设置top等偏移值、用百分比单位、移动端Safari兼容性差、z-index受层叠上下文影响，以及滚动容器实际不可滚动。
sticky定位失效的常见原因
元素没设父容器高度、父级有overflow隐藏、或本身是flex/grid子项但未显式定义交叉轴对齐，都会让position: sticky直接不生效。
- 父容器必须有明确的高度（哪怕只是
min-height: 100vh），否则浏览器无法判断“粘住”的边界 -
overflow: hidden、auto或scroll会截断粘性行为——这是最常踩的坑，尤其用body或main做父级时 - 在
display: flex容器里，子项默认align-items: stretch，但sticky需要能计算自身偏移，建议加align-self: flex-start - 不支持
table相关显示模式（如table-row），也不支持transform非none的祖先元素
导航栏用sticky时必须设置top值
sticky不是“固定在视口”，而是“相对其最近的滚动祖先，在到达某个偏移时停住”。没设top（或bottom等）就等于没告诉它停在哪，结果就是不粘。
- 导航栏通常设
top: 0，但若顶部有banner或通知条，就得设成top: 48px这类具体值 - 不能用百分比（如
top: 10%），只接受px、rem、em等绝对/相对单位 - 如果导航本身有
margin-top，它会影响粘住起始点——建议用padding替代margin来留白
移动端Safari下sticky兼容性陷阱
iOS 15.4之前，Safari对sticky的支持极不稳定：滚动卡顿、突然跳回、甚至完全不触发。即使现在，某些嵌套滚动场景仍会失效。
- 避免在
position: relative+overflow: auto的局部容器里用sticky——iOS Safari大概率不认 - 如果必须局部滚动，改用
position: fixed+ JS监听scroll手动切换类名（虽然重，但稳） - 检测是否支持：
CSS.supports('position', 'sticky')，不支持时降级为relative并靠JS补位 - 不要依赖
will-change: transform来“修复”粘性——反而可能让Safari更懵
和fixed定位的本质区别
sticky是文档流内的定位，fixed是脱离流的。这意味着前者会占位、响应父级样式、受层叠上下文影响；后者不会。
立即学习“前端免费学习笔记（深入）”；
- 导航栏用
sticky后，下面内容不会上顶——因为它的原始位置还在文档流中 -
z-index只在同层叠上下文中有效；如果父容器有transform或opacity，可能意外创建新层叠上下文，导致sticky被盖住 - 想让粘住的导航始终在最上层？别只加
z-index: 1000，先确认它没被父级的isolation: isolate或filter拖进另一个堆叠上下文
overflow-y: auto的盒子都能当滚动祖先——它得真有溢出内容，且没被其他CSS规则（比如contain: layout）锁死布局计算。 
