底部悬浮条用position: fixed最直接，需设bottom: 0、left: 0、right: 0及足够z-index；iOS键盘弹出会导致失效，建议改用absolute+JS动态切换或IntersectionObserver吸底显示。
底部悬浮条用 position: fixed 最直接
固定定位是实现底部悬浮条最常用也最可靠的方式，浏览器原生支持，无需 JS 干预。关键在于正确设置 bottom、left/right 和 width，否则容易出现错位或遮挡。
常见错误现象：bottom: 0 没生效、悬浮条被其他元素盖住、在 iOS Safari 中滚动时闪动或卡顿。
-
bottom: 0必须配合left: 0和right: 0才能铺满底部宽度，只设left: 0会导致右侧留白 - 加
z-index（比如z-index: 1000）避免被模态框、导航栏等覆盖 - iOS Safari 中若父容器有
-webkit-overflow-scrolling: touch，可能干扰fixed定位，建议移除或改用overflow: auto - 若页面有 footer 且希望悬浮条“浮在 footer 上方”，不要用
position: absolute嵌套在 footer 内——它会随页面滚动
<div class="floating-bar">
<button>立即咨询</button>
</div>
<style>
.floating-bar {
position: fixed;
bottom: 0;
left: 0;
right: 0;
background: #fff;
box-shadow: 0 -2px 10px rgba(0,0,0,0.1);
z-index: 1000;
padding: 12px 16px;
}
</style>
需要适配移动端键盘弹出？position: fixed 在 iOS 上会失效
iOS Safari 的软键盘弹出会强制将 fixed 元素“推上”视口顶部，导致底部悬浮条消失或错位。这不是 bug，而是 WebKit 的行为限制——它把键盘区域当作新的视口边界。
真实使用场景：表单页底部放「提交」按钮，用户点击输入框后按钮被顶走，操作中断。
立即学习“前端免费学习笔记（深入）”；
Article To Html
下载
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
- 不能依赖
window.innerHeight或resize事件实时修正，iOS 键盘弹出不触发resize - 可改用
position: absolute+ JS 监听focusin/focusout动态切换定位方式 - 更稳妥的做法是放弃“始终固定”，改为“滚动到底部时才显示”，用 IntersectionObserver 判断 footer 是否即将进入视口
- 若必须固定，可加
viewportmeta 控制缩放：<meta name="viewport" content="height=device-height, initial-scale=1.0">，但效果有限
想让悬浮条只在特定页面/条件出现？用 CSS 类控制比 JS 插入更轻量
硬编码在 HTML 中会导致所有页面都加载，影响首屏和 SEO；用 JS 动态插入又增加执行时机风险（比如 SSR 页面 hydrate 前不可见）。
推荐做法：服务端或构建时注入一个标识类到 <body>，再用 CSS 选择器控制显示逻辑。
- 例如后端渲染时加
<body class="has-floating-bar">，CSS 写body.has-floating-bar .floating-bar { display: block; } - 避免用
display: none+ JS show/hide，因为初始隐藏可能导致布局抖动 - 如果用 React/Vue，优先用
v-if或{show && <FloatingBar />}，而不是style={{ display: show ? 'block' : 'none' }}—— 前者不渲染 DOM，后者仍占位置 - 注意：某些 CMS（如 WordPress）主题会动态改
<body>class，需确认 class 注入时机是否早于 CSS 加载
性能与兼容性：IE11 还要支持吗？
position: fixed 在 IE7+ 都支持，但 IE11 及更早版本对 fixed 元素内的 flex/grid 布局、transform 动画支持不稳定，容易错位或闪烁。
如果你的项目仍需兼容 IE11，这几个点必须验证：
- 避免在
.floating-bar内使用display: flex布局，改用float或 inline-block（尤其按钮+文字组合） - 不要对整个悬浮条加
transform: translateY()实现入场动画，IE11 下fixed+transform会触发新层叠上下文，导致z-index失效 - 测试真机：部分安卓低版本 WebView（如 Android 4.4）对
fixed的 top/bottom 计算有偏差，建议加top: auto显式重置
现在绝大多数项目已放弃 IE 支持，但只要构建配置里还开着 browserslist 的 ie 11，这些细节就绕不开。
