用position: fixed实现底部悬浮按钮需设bottom: 0、left/right: 0、width或显式宽高，并加padding-bottom于body防遮挡；移动端须适配safe-area与点击热区，禁用transform父容器以防fixed失效。
用 position: fixed 实现底部悬浮按钮
直接加 position: fixed 就能脱离文档流贴在视口底部，但要注意它会覆盖原有内容，且不随页面滚动而移动——这正是购物车按钮需要的效果。
关键不是“固定”，而是“固定得不碍事”：
-
bottom: 0和left: 0或right: 0配合使用，决定水平位置 - 必须显式设置
width（比如100%）或left/right，否则默认宽度为内容宽，可能缩成一条线 - 加上
z-index: 1000确保压在其他元素上面，尤其当页面有 modal 或 header 时 - 如果按钮内含文字+图标，建议用
padding控制高度，别依赖height，避免文字垂直居中失效
避免遮挡页面主要内容
fixed 元素不占文档流空间，滚动到底部时，正文最后一段常被按钮盖住。这不是 bug，是预期行为，但用户体验差。
解决方法只有一种：给 <body> 或主内容容器加下边距（padding-bottom 或 margin-bottom），值至少等于按钮高度 + 可选间距：
立即学习“前端免费学习笔记（深入）”；
body {
padding-bottom: 72px; /* 假设按钮高 64px，留 8px 间隙 */
}注意：padding-bottom 加在 <body> 上是安全的；加在 <html> 上可能触发奇怪的滚动条行为；加在某个 <div class="main"> 上则需确保它是直接子容器且高度占满视口剩余区域。
适配移动端点击热区与安全区域
手机端手指操作需要足够大的点击区域，同时避开 iOS 底部手势条（safe area）。
- 按钮最小高度建议 ≥ 48px（iOS HIG 推荐），可用
min-height: 48px+padding保证 - 用
env(safe-area-inset-bottom)动态扩展底部空隙：padding-bottom: calc(8px + env(safe-area-inset-bottom)); - 务必加
pointer-events: auto（虽然默认就是 auto，但某些 CSS 重置库会设成 none） - 禁用
user-select: none，否则长按可能触发文字选择而非点击
Vue/React 中动态显示隐藏的注意事项
如果按钮要根据是否有商品才显示（比如空购物车时隐藏），不要用 v-if 或 {show && <Button>} 直接销毁 DOM —— 这会导致 fixed 元素反复进出文档流，触发浏览器重排，动画卡顿。
推荐用 visibility: hidden + opacity: 0 配合 transition 控制显隐：
.cart-btn {
visibility: hidden;
opacity: 0;
transition: opacity 0.2s, visibility 0.2s;
}
.cart-btn.show {
visibility: visible;
opacity: 1;
}这样 DOM 始终存在，fixed 定位不会重算，滚动锚点也更稳定。
真正容易被忽略的是：fixed 元素的父级如果有 transform、perspective 或 filter，会创建新的 containing block，导致 fixed 失效——变成相对那个父容器定位。检查控制台 computed styles 里的 “Containing block” 是否还是 viewport。
