fixed底部悬浮条需设bottom:0+left:0+right:0确保铺满视口；body加padding-bottom防遮挡；z-index显式声明且避免父级创建新层叠上下文；动画用visibility/opacity/transform而非display切换。
fixed 底部悬浮条必须设 bottom: 0 + left: 0 + right: 0
只写 position: fixed; bottom: 0 是不够的——它默认宽度由内容决定，可能只占几个字宽，甚至在某些浏览器里缩成一条线。必须显式声明水平铺满：left: 0 和 right: 0 缺一不可。否则在 Safari 或微信 WebView 中容易出现错位或截断。
常见错误是用 width: 100% 替代 left/right，但当父容器有 padding 或 border 时，width: 100% 会超出视口，触发横向滚动条；而 left: 0; right: 0 始终锚定视口边缘，更可靠。
body 必须加 padding-bottom 防遮挡
fixed 元素脱离文档流，不占空间，但内容会“长”到它底下被盖住。解决方法不是给悬浮条加 margin-top，而是给 body 设 padding-bottom，值等于悬浮条高度（如 56px）。
- 如果悬浮条高度不固定（比如文字换行、字号响应变化），别硬写死
padding-bottom，改用 JS 动态读取并设置 - 别在
html或main上设padding-bottom，容易被子元素 margin 折叠或继承干扰 - 移动端需注意：iOS Safari 地址栏收放会改变视口高度，固定高度 + 固定
padding-bottom比百分比更稳
z-index 别堆太高，但必须显式声明
不设 z-index 时，fixed 元素默认在 stacking context 底层，很可能被 position: relative 的弹窗、广告图或 sticky header 盖住。设 z-index: 999 足够，z-index: 999999 反而容易和第三方 SDK（如客服插件、埋点浮层）冲突。
立即学习“前端免费学习笔记（深入）”；
真正容易被忽略的是 stacking context 的“传染性”：如果悬浮条父容器有 transform、filter 或 will-change，它会创建新 stacking context，导致 z-index 在该上下文中重新计算——此时即使设了 99999 也没用。排查时可临时给父级加 transform: none 看是否恢复。
动画滑入必须避开 display: none
想让底部悬浮条加载后“滑上来”，千万别用 display: none → display: block 触发动画——display 切换会强制重排，第一帧直接跳到终点，失去滑入效果。
正确初始状态应为：visibility: hidden; opacity: 0; transform: translateY(20px)；动画用 @keyframes 控制 transform: translateY(0) 和 opacity: 1；触发时机放在 window.addEventListener('DOMContentLoaded', ...) 里加类名，确保 DOM 就绪后再播放。
若用框架（如 React/Vue），注意不要在组件挂载前就渲染该 DOM 节点，否则 CSS 动画可能抢在类名添加前完成——宁可先不 render，等 useEffect 或 mounted 后再插入。
