底部固定悬浮条必须用position: fixed，设bottom: 0、left: 0、right: 0并加z-index；需padding-bottom腾空间，移动端用env(safe-area-inset-bottom)适配安全区，ios注意点击穿透。
底部固定悬浮条用 position: fixed 最直接
要让条始终贴在视口底部、不随滚动消失，position: fixed 是唯一可靠方案。绝对定位（position: absolute）依赖父容器，一旦父元素高度变化或有滚动，就容易错位；相对定位更不适用。
关键点是：必须设 bottom: 0，同时明确宽度（通常为 100%），否则可能只占内容宽，左右留白。
-
left: 0和right: 0比单纯width: 100%更稳妥，能绕过某些盒模型计算误差 - 记得加
z-index（如z-index: 1000），否则可能被其他层遮住 - 若页面有
body { margin: 0 }以外的默认边距，需确认是否影响悬浮条边缘对齐
避免遮挡正文内容的两种处理方式
固定定位会脱离文档流，很可能盖住原本在底部的按钮、页脚或表单提交区。这不是 bug，是预期行为——你得主动腾出空间。
常见做法有两种：
- 给
body或主内容容器加padding-bottom，值等于悬浮条高度（比如padding-bottom: 60px） - 给
body加margin-bottom，但注意这会影响整体高度计算，部分 JS 获取scrollHeight时可能不准
推荐前者，兼容性好，且不影响滚动逻辑。如果悬浮条高度动态变化（如响应式缩放），就得用 JS 同步更新 padding，不能只靠 CSS。
移动端适配要注意 viewport 和安全区域
iOS Safari 和部分安卓浏览器会在底部留出“手势返回”或“Home Indicator”区域，导致 bottom: 0 实际停在安全区上方，看起来像悬空了一截。
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
解决方法是改用 bottom: env(safe-area-inset-bottom)，并配合 @supports 回退：
.fixed-bar {
position: fixed;
bottom: 0;
bottom: env(safe-area-inset-bottom);
left: 0;
right: 0;
height: 60px;
}
注意：env() 不是所有老版本浏览器支持，必须保留 bottom: 0 作为降级。另外，safe-area-inset-bottom 值为 0 时（比如横屏或无指示器设备），不会额外加空隙。
点击穿透问题常出现在 iOS 的 fixed 元素上
某些 iOS 版本中，如果悬浮条里有 <button></button> 或 <a></a>，第一次点击无反应，第二次才触发——这是 WebKit 的渲染延迟导致的“点击穿透”现象。
不是 bug，但用户感知极差。缓解方式有限，最有效的是：
- 给悬浮条容器加
transform: translateZ(0)或will-change: transform，强制开启硬件加速 - 确保内部可点击元素有明确的
cursor: pointer和touch-action: manipulation - 避免在悬浮条上叠加透明遮罩层（如用于“禁用状态”的
div），它会加剧该问题
这个细节在桌面端几乎不出现，但只要目标用户含 iPhone，就必须验证真机点击反馈。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
