绝对定位元素在移动端滚动时消失，主因是定位上下文被overflow裁剪或未正确锚定到滚动容器；需检查祖先节点overflow属性及高度，确保滚动容器设position: relative，并在iOS Safari中用translate3d双写加父级relative。
绝对定位元素在移动端滚动时消失，基本不是“渲染失败”，而是它被某个祖先容器裁剪了，或者压根没锚定到你认为的那个父容器上。
为什么滚动时absolute元素会消失
最常见原因是：该元素的定位上下文（containing block）设置了overflow: hidden或overflow: auto，但自身高度不足、内容未溢出，导致浏览器把它整个裁掉——DOM还在，像素没了。另一个高频原因是：滚动容器本身没设position: relative，absolute元素实际锚定到了body或html，一滚动就跑偏甚至被截断。
检查定位上下文是否被overflow裁剪
打开 DevTools，从消失的元素往上逐级点开父节点，重点看这些属性：
- 有没有祖先节点设置了
overflow: hidden、overflow: auto或overflow: scroll - 那个节点是否有固定高度（如
height: 300px）且内部内容没撑开它 - 特别注意轮播图外层、Tab 根容器、弹窗 wrapper、卡片包裹层——这些地方最容易藏
overflow: hidden
临时删掉可疑节点的overflow声明，如果元素立刻“回来”，就确认是它干的。
立即学习“前端免费学习笔记（深入）”；
确保滚动容器自己就是定位上下文
如果absolute元素放在一个可滚动的div里，但这个div只写了overflow-y: auto和height: 400px，它默认仍是position: static，不构成定位上下文。结果就是absolute元素向上找，最终锚定到body，滚动时自然飘走。
修复方式很简单：
- 给滚动容器加
position: relative（副作用最小） - 避免它同时有
overflow: hidden——二者共存时，hidden会优先裁剪 - 如果用了
uni-app的<swiper>，别在外层套无定位的<view>，把absolute元素直接放进<swiper-item>并确保该item有position: relative
iOS Safari 下的合成层陷阱
在 iOS Safari（尤其是 15.x–16.2）中，仅加transform: translateZ(0)大概率无效，甚至引发更严重闪烁。真正可靠的写法是双保险：
- 给absolute元素加：
-webkit-transform: translate3d(0,0,0)和transform: translate3d(0,0,0) - 它的直接父容器必须有
position: relative - 避免父容器设
z-index过高（比如9999），iOS对超大值排序不稳定
别碰will-change: transform——它可能加重内存压力，还破坏position: sticky行为。
真正难的不是加哪行CSS，而是搞清“这个absolute元素到底锚在哪”和“谁在裁它”。这两点没理清，补再多translate3d也白搭。
