<p>position: sticky 在移动端底部失效主要因浏览器兼容性差、父容器条件不满足及层叠上下文干扰；正确做法是用 top 配合 calc(100% - 元素高度) 或 Flex + margin-top: auto 实现稳定吸底。</p>
为什么 position: sticky 在移动端底部失效
因为大多数移动端浏览器（尤其是 iOS Safari 低版本）不支持 sticky 用于 bottom 方向，只认 top。即使写了 bottom: 0，它也直接退化为 static，根本不会粘住。
- 安卓 Chrome 从 56+、iOS Safari 从 15.4+ 才开始支持
bottom方向的sticky，但仍有兼容性风险 -
sticky的触发依赖父容器有明确高度或可滚动区域，而很多「底部吸顶」场景下父容器是height: auto或未设overflow - 如果父元素用了
transform、filter、will-change，会创建新的层叠上下文，导致sticky失效
用 position: sticky 实现底部吸顶的正确写法
只能靠「反向思维」：把元素放在容器底部，再用 top 触发粘性，本质是让它「粘在容器底边」而非视口底边。
- 父容器必须有固定高度或明确滚动边界（如
max-height: 60vh; overflow-y: auto） - 子元素设置
position: sticky; bottom: 0; top: auto;不起作用，得写成position: sticky; top: 100%;并配合transform: translateY(-100%); - 更稳妥的做法是让元素本身位于容器末尾，然后用
position: sticky; top: calc(100% - 60px);（假设元素高 60px），靠top值逼近容器底边
.container {
max-height: 70vh;
overflow-y: auto;
}
.sticky-bottom {
position: sticky;
top: calc(100% - 52px); /* 52px 是元素自身高度 */
margin-top: auto;
}真·底部吸顶的替代方案：Flex + margin-top: auto
当内容区高度不确定但父容器可设为 Flex 容器时，这是最稳定、无兼容问题的方案，适合「页脚式吸底」而非「滚动中吸底」。
- 父容器设
display: flex; flex-direction: column; height: 100vh; - 内容区用
flex: 1; overflow-y: auto;占满剩余空间 - 底部元素直接放最后，加
margin-top: auto;—— 它会被自动推到容器底部，且不脱离文档流 - 注意：这个方案不适用于「在长列表滚动过程中始终贴着视口底边」，只适用于整个页面结构的底部锚定
iOS Safari 下 position: sticky 的隐藏坑
即使写了正确的 top 值，iOS Safari（尤其 15.0–15.3）仍可能不触发粘性，原因常被忽略：
立即学习“前端免费学习笔记（深入）”；
-
sticky元素的父级不能有backface-visibility: hidden或-webkit-overflow-scrolling: touch（后者在旧版中强制开启硬件加速，会破坏 sticky 行为） - 父容器若设置了
contain: layout paint，也会阻止 sticky 计算 - 滚动容器必须是该元素的**最近滚动祖先**；如果中间隔了多个
overflow: hidden层，sticky 就找不到锚点 - 调试技巧：临时加
outline: 1px solid red看 sticky 元素是否还在正常文档流里，消失说明已被提升图层或被裁剪
实际项目里，别赌 bottom: 0 能 work。要么降级用 Flex 布局锚定，要么用 JS 监听 scroll + getBoundingClientRect() 手动切 fixed，尤其涉及支付按钮、悬浮操作栏这类关键交互时，视觉错位比多几行 JS 更伤用户体验。
