悬浮条必须直接挂载 body 下，避免被 transform/filter/will-change 容器包裹导致 fixed 失效；padding-bottom 和高度需用 calc(60px + env(safe-area-inset-bottom, 0px)) 适配全面屏；禁用 absolute 模拟固定；确保父级为 body 且无触发新层叠上下文的属性。
直接挂载 body 下，别嵌套在任何布局容器里
悬浮条一旦被包在 transform、filter 或 will-change 容器内，position: fixed 就会失效——它会被“锁”在父级层叠上下文中，定位偏移、点击穿透、z-index 失效全都会出现。iOS Safari 尤其敏感。
实操建议：
立即学习“前端免费学习笔记（深入）”；
Article To Html
下载
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
- 把悬浮条 HTML 片段（如
<div class="fixed-bottom-bar">...</div>）直接插入到<body>开标签之后、其他内容之前 - 用
getComputedStyle(el).transform !== "none"快速检查父级是否触发了新层叠上下文 - 如果必须复用现有组件结构，优先用
document.body.appendChild()动态挂载，绕过 DOM 层级限制
padding-bottom 值必须匹配悬浮条真实高度，且要加 env(safe-area-inset-bottom)
只写 padding-bottom: 60px 在 iPhone X 及后续全面屏设备上会漏掉底部安全区，Home Indicator 会盖住内容；纯 Android 挖孔屏也可能遮挡。硬编码固定值 = 在不同设备上反复调试。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 给
body加：padding-bottom: calc(60px + env(safe-area-inset-bottom, 0px)) - 悬浮条自身高度也用同样逻辑：
height: calc(60px + env(safe-area-inset-bottom, 0px)) - 避免用
100vh或百分比设高——Safari 地址栏收放时会跳变 - 如果项目不支持
env()（如 IE 或旧 WebView），用 JS 回退检测：if ('safeAreaInsets' in window.visualViewport)
别用 position: absolute 模拟固定，尤其别在卡片或表单里这么干
看到有人把按钮放在一个 .card 里，然后给按钮加 position: absolute; bottom: 0，以为就能“固定到底部”。结果小屏下卡片高度塌陷、多列转单列后按钮悬空、滚动时位置错乱——这根本不是固定，只是视觉巧合。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 局部容器（如卡片、弹窗）内需对齐底部，用
display: flex; flex-direction: column; justify-content: space-between - 全局悬浮条必须走
position: fixed; bottom: 0; left: 0; right: 0三件套，缺一不可 - 绝对定位只适用于已知父容器有
position: relative且高度可控的场景，不适用于跨容器、响应式、滚动适配
移植时最容易被忽略的：堆叠上下文和 z-index 的实际生效层级
写 z-index: 9999 不等于真能盖住一切。如果悬浮条父级（比如某个 div#app）本身处于一个低层级的堆叠上下文中，再高的 z-index 也出不来。很多移植后按钮点不中、菜单被遮，根源在这儿。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 用 Chrome DevTools 的 Layers 面板确认悬浮条是否在顶层合成层
- 确保悬浮条的直接父节点是
body，且body没有transform或opacity < 1等触发新层叠上下文的属性 - 移动端慎用
backdrop-filter，它会隐式创建层叠上下文，让 fixed 元素“沉底”
