fixed元素未贴底主因是top与bottom同时设置冲突；正确做法仅设bottom: 0，避免top干扰，且需注意iOS键盘弹出、安全区及z-index遮挡等问题。
fixed定位为什么没贴底？检查top/bottom是否冲突
用 position: fixed 想让元素停在页面底部，结果悬在半空——大概率是同时写了 top 和 bottom，或者只写了 top 没删干净。浏览器会按声明顺序覆盖，但更关键的是：top 和 bottom 不能共存生效，除非配合 height 手动挤压。
正确做法只留一个方向锚定：
- 要贴底，就只设
bottom: 0，别碰top - 如果父容器有 padding 或 margin，fixed 元素不受影响——它相对于视口定位，不是父容器
- 移动端 Safari 对
bottom: 0在键盘弹出时可能失效，得监听resize或focusin动态调整
需要留出底部间距？用bottom加数值代替margin
想让 fixed 元素离屏幕底边留 20px 空隙，别写 margin-bottom: 20px——fixed 元素的 margin 不会推离视口边缘，它根本没“底部外边距”这个概念。
必须直接调 bottom 值：
立即学习“前端免费学习笔记（深入）”；
footer {
position: fixed;
bottom: 20px; /* ✅ 正确：离视口底边20px */
left: 0;
right: 0;
}-
bottom: 20px是相对于视口底边，不是父元素或文档流 - 如果页面有 iOS 安全区（比如 iPhone X+），需要叠加
padding-bottom: env(safe-area-inset-bottom)防遮挡 - 避免用百分比值（如
bottom: 5%），不同设备计算结果不一致，优先用 px/rem
fixed元素遮挡内容？z-index和滚动穿透要手动处理
fixed 元素默认堆叠上下文层级高，容易盖住下方可点击区域或表单输入框，尤其在 iOS 上点不到输入框、键盘不弹起。
- 确保
z-index值合理，不要盲目设 9999；同级 fixed 元素按声明顺序层叠 - 如果 fixed 元素内含按钮或输入框，加
pointer-events: auto（默认就是 auto，但某些重置样式会设为 none） - 滚动时内容从 fixed 元素下穿过是正常行为；若需“跟随滚动”，就不能用 fixed，该换
position: sticky+bottom: 0
兼容性与性能注意点：不要在动画中频繁改bottom
在 scroll 或 touchmove 里动态更新 bottom 值（比如做吸底导航随滚动上浮），会触发频繁重排，iOS 上卡顿明显。
- 改用
transform: translateY()替代bottom变更，GPU 加速更稳 - 旧版 Android（4.4–）对
fixed支持差，部分机型会当absolute渲染，需降级方案（如监听 scroll 模拟） - CSS
will-change: transform对持续动画有帮助，但别滥用，开销不小
实际最难调的往往是 iOS 键盘弹起后视口高度突变，bottom: 0 会卡在键盘上方不动——这问题没有通用 CSS 解法，得靠 JS 捕获 visualViewport 或监听 resize 动态重设 bottom 值。
