用 position: fixed 实现底部悬浮按钮需设 bottom: 0、z-index: 1000 并预留主体 padding-bottom；移动端须适配点击区域、禁用长按菜单、处理 ios safari fixed 闪动及软键盘冲突。
用 position: fixed 实现底部悬浮按钮
直接加 position: fixed 就能脱离文档流固定在视口底部，但容易遮挡原页面内容或被其他元素覆盖，必须手动控制层级和留白。
- 给按钮容器设置
position: fixed; bottom: 0; left: 0; width: 100%; - 务必加
z-index: 1000;（数值要高于页面其他fixed或sticky元素） - 如果页面有底部导航栏或页脚，需在主体内容底部预留高度（如
padding-bottom: 60px;），否则会被按钮盖住 - 移动端要注意
viewport设置，避免缩放导致按钮错位
按钮点击后跳转或唤起购买流程
按钮本身只是 UI 元素，行为要靠 JS 绑定，别只写个空 <a href="#"></a>——这会导致页面跳到顶部，体验极差。
- 推荐用
<button type="button"></button>，语义清晰且默认不提交表单 - 绑定点击事件时，优先调用
event.preventDefault()防止默认行为干扰 - 跳转用
window.location.href = '/checkout?pid=123';；唤起弹窗则触发对应 JS 函数，比如showPurchaseModal(); - 若需携带商品 ID，建议从按钮的
data-pid属性读取，而不是硬编码在 JS 里
适配移动端点击区域与视觉反馈
手机上手指点击精度低，60px 高度是底线，且必须有明确的按压反馈，否则用户会反复点。
- 设置
min-height: 60px;和padding: 16px 20px;保证可触区域足够大 - 用
:active伪类或 JS 添加is-pressed类，配合背景色/阴影变化做反馈 - 禁用浏览器默认长按菜单：给按钮加
-webkit-touch-callout: none;和user-select: none; - 避免在按钮内嵌套
<a></a>或<div>，防止 iOS Safari 点击穿透或延迟 300ms <h3>避免 fixed 按钮在 iOS Safari 中闪动或错位</h3> <p>iOS Safari 对 <code>fixed元素支持不稳定，尤其在地址栏收起/展开、软键盘弹出时，按钮常会“跳一下”或卡在错误位置。- 加
transform: translateZ(0);强制硬件加速，缓解重绘抖动 - 监听
resize和scroll事件，在软键盘弹出后手动重置bottom值（部分机型需要） - 更稳妥的做法：用
position: sticky;替代fixed，配合一个占位容器撑开底部空间，兼容性更好且无闪动 - 测试时务必真机打开，模拟器无法复现大部分 iOS 渲染问题
- 加
