position:sticky失效最常见原因是父容器未设置overflow或高度不足，且必须有滚动上下文；top值需明确指定；transform等属性会创建新层叠上下文导致失效。
position:sticky 为什么加了没反应
最常见的情况是：元素父容器没设置 overflow，或者父容器高度不够、没有滚动上下文。浏览器只在「有滚动行为的祖先容器内」才触发 sticky 行为，不是加了就粘。
- 必须确保该元素的最近滚动祖先（比如
<div class="scroll-container">）设置了overflow-y: auto或scroll，且内容实际溢出 - 不能把
position: sticky加在<body>或<html>上——它们不是滚动容器的“直接父级”，多数浏览器不认 -
top值必须明确指定（如top: 0），设成top: auto或不写，等于没开 sticky - 如果父元素用了
transform、perspective、filter等属性，会创建新的层叠上下文 + 新的包含块，导致 sticky 失效
sticky 和 fixed 的核心区别在哪
关键不在“是否固定”，而在“是否脱离文档流”和“是否响应滚动上下文”。
-
position: fixed脱离文档流，参考视口定位，父容器滚动不影响它；position: sticky不脱离文档流，初始表现像static，只在滚动到临界点时“吸住”，离开临界区后继续随文档滚动 - sticky 的
top/bottom是相对于其**最近滚动祖先的可视区域边界**计算的，不是相对于视口；fixed 则永远相对于视口 - sticky 支持
z-index，但层级受制于其所在 stacking context；fixed 默认新建 stacking context，更容易盖住其他内容
移动端 iOS Safari 中 sticky 不生效怎么办
iOS 15.4 之前存在广泛兼容问题：sticky 在 <div> 滚动容器中常失效，尤其嵌套较深或用了 -webkit-overflow-scrolling: touch 时。
- 优先用
<body>或<html>作为滚动容器（即让整个页面滚动），此时 sticky 表现最稳定 - 避免给 sticky 元素的父级加
will-change: transform或backface-visibility: hidden，iOS WebKit 对这些组合极其敏感 - 临时兜底方案：监听
scroll事件 +getBoundingClientRect()手动切position: fixed，但要注意性能和滚动抖动 - 检查是否启用了
overscroll-behavior: contain—— 它会截断滚动传播，间接让 sticky 失去触发条件
sticky 元素被遮挡或层级错乱
不是 z-index 写小了，而是 sticky 元素被卡在了错误的 stacking context 里。
立即学习“前端免费学习笔记（深入）”；
- 如果 sticky 元素的某个祖先设置了
opacity < 1、transform、filter或will-change，就会创建新 stacking context，sticky 元素的z-index只在这个上下文中生效 - 解决办法：把 sticky 元素提升到更高层的容器中（比如提到 body 下），或移除中间某层的“context 创建属性”
- 用 Chrome DevTools 的 Layers 面板可快速识别哪些节点生成了 stacking context；Elements 面板勾选 “Show layout shifts” 能直观看到 sticky 吸附瞬间是否跳变
sticky 看似简单，真正难的是搞清它依赖的滚动上下文链和 stacking context 层级——这两者一错，表现就完全不可控。调试时别只盯着自己写的那行 position: sticky，先看父容器有没有滚动、有没有意外创建新层。
