用 position: fixed 实现底部固定条：设 bottom: 0、left: 0、right: 0、z-index ≥ 100、will-change: transform；展开用 transform: translateY() 配合 transition，禁用 height 动画；内容区加 max-height 和 overflow-y: auto；真机测试需防 iOS 键盘顶起、微信闪动、滚动撕裂。
用 position: fixed 实现底部固定条基础布局
底部悬浮条必须脱离文档流，position: fixed 是唯一可靠选择。不要用 absolute 或 sticky —— 前者依赖父容器定位上下文，后者在滚动时行为不稳定，尤其在 iOS Safari 中常失效。
关键样式要写全：
-
bottom: 0确保贴底（不是top: auto或留空） -
left: 0和right: 0控制宽度铺满（避免用width: 100%，它可能受父元素 padding 影响） - 显式设置
z-index（建议 ≥ 100），否则容易被弹窗、广告等遮盖 - 加
will-change: transform可缓解 iOS 上 fixed 元素滚动卡顿
向上展开靠 transform: translateY()，别用 height 动画
直接动画 height 会触发重排（reflow），导致卡顿，尤其在低端安卓机上明显。用 transform 只触发重绘（repaint），性能好得多。
实现逻辑是：默认状态让条“藏”在视口外下方，点击后向上平移至可见位置：
立即学习“前端免费学习笔记（深入）”；
- 初始
transform: translateY(100%)（即整个高度向下偏移） - 展开态改为
transform: translateY(0) - 配合
transition: transform 0.3s ease-out，别用ease-in-out，收起时太慢 - 注意：如果条内容高度不固定，不要依赖
transform隐藏后还保留交互；需同步控制pointer-events: none初始态
展开区域内容超出视口时，得用 overflow-y: auto + 最大高度
用户点开后如果内容很长，必须可滚动，但不能撑开整个页面——这会让底部条失去“悬浮”感。
正确做法是限制展开区最大高度，并启用内部滚动：
- 给展开容器设
max-height: 60vh（或具体像素值，如400px），避免遮住太多主内容 - 加
overflow-y: auto，并确保有-webkit-overflow-scrolling: touch（iOS 滚动惯性） - 别忘了给滚动条留空间：用
padding-right: 8px配合::-webkit-scrollbar隐藏或缩窄（否则滚动条突兀） - 如果用 JavaScript 控制展开/收起，记得在展开后调用
element.scrollIntoView({ block: 'nearest' })防止焦点丢失
移动端真机测试最容易漏的三个点
iOS Safari 和部分安卓 WebView 对 fixed + transform 组合有隐藏坑，不测真机大概率上线翻车：
- 键盘弹出时，
fixed元素可能被顶到页面中间（iOS 15+ 尤其明显）：临时方案是监听focusin事件，对输入框做scrollIntoView(false)并延迟恢复 fixed 条位置 - 微信内置浏览器中，
transform动画可能闪一下：加backface-visibility: hidden强制 GPU 加速 - 展开后快速滚动，内容区域偶尔“撕裂”或错位：确保父容器没设
overflow: hidden，且展开容器本身不参与 document 流的尺寸计算（例如不要用display: inline-block）
复杂点不在动画本身，而在各种环境对 fixed 定位的解释差异——宁可多加一层 wrapper 元素隔离样式，也不要为了“简洁”牺牲兼容性。
