最常见原因是同时设置top/bottom与height:100vh导致溢出；正确做法是用calc(100vh - 偏移值)控制高度，或仅设bottom:0/top:偏移值让浏览器自动计算剩余空间。
fixed 元素 bottom/top 值没减去实际占用空间
最常见原因是写 bottom: 0 或 top: 60px 后，直接设 height: 100vh——这会让元素从视口顶/底开始算满高，必然溢出。比如顶部有 60px 导航栏，top: 60px + height: 100vh 实际占了 1060px（假设视口高 1000px）。
- 正确做法是用
calc(100vh - 60px)控制高度，或用bottom: 0+top: 60px让浏览器自动计算剩余空间 -
100vh在 iOS 地址栏收起/弹出时会跳变，visualViewport.height更稳定但需 JS 配合 - 避免
max-height: 100vh，它不响应top偏移，只限制上限，不解决底部溢出
父容器 transform 干扰 fixed 定位参考系
当 fixed 元素的某个祖先节点设置了 transform、perspective 或 filter，该祖先会成为新的 containing block，导致 fixed 不再锚定视口，而是锚定这个变换后的容器——结果就是位置漂移、超出预期区域。
- DevTools 中检查该元素的 “Computed → Containing block”，确认是否意外落到某层
transform父级上 - 临时移除祖先的
transform可验证问题；若必须保留，可将fixed元素提级到body下 - React/Vue 中可用
Portal或Teleport绕过 DOM 层级干扰
移动端键盘弹出时 fixed 锚定视觉视口而非布局视口
iOS/Android 键盘弹出会压缩“视觉视口（visual viewport）”，而 fixed 元素默认锚定于此，导致底部按钮被顶出屏幕——这不是 bug，是规范行为。
如果你了解HTML，CSS和JavaScript，您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造，可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Android友好的网络应用程序，然后转换与自由PhoneGap框架到一个原生的Android应用程序。了解为什么设备无关的移动应用是未来的潮流，并开始构建应用程序，提供更
- iOS 16.4+ 可用
bottom: calc(20px + env(keyboard-inset-bottom, 0px))，但需先加<meta name="viewport" content="viewport-fit=cover"> - Chrome/Edge 推荐监听
visualViewport.height变化，比window.innerHeight更准且无抖动 - 旧环境 fallback：监听
focusin到<input>，延时读取getBoundingClientRect().bottom
overflow: hidden 父级意外裁剪 fixed 子元素
看似无关，但某些 WebView 或折叠屏环境下，fixed 元素若被包裹在 overflow: hidden 且 position: relative 的祖先内，可能被裁剪——尤其当该祖先本身尺寸未占满视口时。
- fixed 元素本应脱离文档流，但部分安卓 WebView 会错误地将其纳入父级 overflow 裁剪范围
- 检查是否有中间层容器同时满足：position ≠ static + overflow: hidden + height
- 稳妥解法：确保
fixed元素直接挂载在body下，或用position: absolute+body { position: relative }模拟
真正让 fixed “稳住”的关键，不是堆属性，而是明确它锚定谁、被谁裁、受什么影响。很多溢出问题表面是尺寸计算错，根子其实是定位上下文或视口理解偏差。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
