直接用 position: fixed 失效是因为父容器使用 transform、perspective 或 filter 会创建新包含块，使 fixed 元素相对该块而非视口定位；应移除相关 CSS 或将按钮提至 body 直接子级。
为什么直接用 position: fixed 会失效
常见错误是给按钮加 position: fixed; bottom: 0; 就以为完事了，结果在 iOS Safari 或部分安卓 WebView 中按钮“消失”或错位。根本原因是：父容器用了 transform、perspective 或 filter（哪怕只是 transform: translateZ(0)），就会创建新的堆叠上下文和包含块，导致 fixed 元素不再相对于视口定位，而是相对于这个新包含块。
检查你是否在 或某个外层 <div> 上写了类似 <code>transform: translateX(0) 的 hack，删掉它；或者把按钮提到 直接子级位置——这是最稳妥的解法。
底部按钮必须满足的触控与语义要求
移动端购物车按钮不是“能点就行”，它要同时过合规、可访问、可维护三关：
-
button必须带type="button"，否则嵌在<form></form>里会触发 submit 刷新页面 - 必须有
data-product-id（或data-sku-id），不能只靠 class 或 DOM 位置推断商品 ID - 点击区域至少
44px × 44px：用padding内撑，别靠margin外扩；避免inline-block导致换行空格压缩宽度 - 必须有
aria-label（如aria-label="加入购物车"），屏幕阅读器才不会读成“按钮”两个字
如何避免被弹窗、广告浮层遮挡
z-index: 999 不等于“永远在最上层”。如果按钮包在 <main></main> 或某个 position: relative 的容器里，而弹窗（比如优惠券浮层）是挂载在 下的，那按钮的实际堆叠上下文就被截断了。
立即学习“前端免费学习笔记（深入）”；
正确做法：
- 按钮容器必须是
的直接子元素（即不嵌套在任何position非static的祖先中） - 设
z-index: 1001以上（避开主流 UI 库默认值，如 Ant Design 是 1000，Vant 是 2000） - 加上
pointer-events: auto，防止父层pointer-events: none意外拦截
响应式下怎么让按钮只在商品页显示、不在首页/列表页出现
不要靠 JS 动态 append/remove 按钮节点——容易引发重排、状态丢失、SSR 不一致。推荐用 CSS 控制显隐，配合语义化 class：
在商品详情页的 上加 class：，然后写：
.cart-fixed-btn { display: none; }
.page-product .cart-fixed-btn { display: block; }
@media (min-width: 768px) {
.cart-fixed-btn { display: none; }
}
这样既免去 JS 渲染逻辑，又保证服务端能一次性输出正确结构，还天然支持 SSR 和 SEO。
真正难的不是让按钮“贴到底部”，而是让它在各种上下文里都可靠响应、不被截断、不被遮挡、不误提交——这些细节漏掉一个，用户就可能点十次都加不进购物车。
