用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，是预期行为，但用户体验差。
解决方法只有一种：给 或主内容容器加下边距（padding-bottom 或 margin-bottom），值至少等于按钮高度 + 可选间距：
body {
padding-bottom: 72px; /* 假设按钮高 64px，留 8px 间隙 */
}
注意：padding-bottom 加在 上是安全的；加在 上可能触发奇怪的滚动条行为；加在某个 <div class="main"> 上则需确保它是直接子容器且高度占满视口剩余区域。<h3>适配移动端点击热区与安全区域</h3>
<p>手机端手指操作需要足够大的点击区域，同时避开 iOS 底部手势条（safe area）。</p><div class="aritcle_card flexRow artxards">
<div class="artcardd flexRow">
<a class="aritcle_card_img" rel="nofollow" href="/xiazai/skill9263" title="Html2md"><img
src="https://img.php.cn/upload/skill/000/000/081/179249945220127.jpg" alt="Html2md" onerror="this.onerror='';this.src='/static/lhimages/moren/morentu.png'" ></a>
<div class="aritcle_card_info flexColumn">
<a rel="nofollow" href="/xiazai/skill9263" title="Html2md" class="overflowclass">Html2md</a>
<p class="overflowclass">使用 Readability + Turndown 将 HTML 页面转换为干净的、Agent 友好的 Markdown。去除导航栏、广告、页脚、Cookie 横幅、社交按钮等干扰元素。支持 URL...</p>
</div>
<a rel="nofollow" href="/xiazai/skill9263" title="Html2md" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span>
</a>
</div>
</div>
<ul>
<li>按钮最小高度建议 ≥ 48px（iOS HIG 推荐），可用 <code>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>}</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。
