夸克Android中fixed底部菜单必被遮挡，因其不支持env(keyboard-inset-bottom)且键盘弹出时仅压缩visualViewport而不重算fixed位置，导致元素锚定在旧视口底部而飘移；须用flex布局替代fixed，并配合focusin事件+setTimeout动态设absolute定位补位。
夸克浏览器（Android 版）对 position: fixed 的处理基本遵循 Chromium 行为，但存在两个关键差异：不支持 env(keyboard-inset-bottom)，且软键盘弹出时会强制压缩 visualViewport 而不重算 fixed 元素位置——这导致底部菜单直接被顶起或遮挡。纯 CSS 无法兜底，必须组合结构 + JS。
为什么夸克里 fixed 底部菜单必被遮挡
夸克 Android 使用基于 Chromium 的 WebView，但未启用 iOS 那套 keyboard-inset 环境变量；键盘弹出后，window.innerHeight 会突变（比如从 800px → 400px），而 fixed 元素仍按旧高度锚定在“视口底部”，实际渲染位置就飘到屏幕中间。这不是样式写错了，是底层视口模型限制。
用 flex 布局替代 fixed 实现真·底部固定
这是目前在夸克中唯一稳定、无需 JS 补位的方案，核心是让底部区域成为文档流一部分：
- 根容器设
display: flex; flex-direction: column; min-height: 100dvh;（100dvh比100vh更准，避免地址栏干扰） - 主内容区加
flex: 1; overflow-y: auto;，确保可滚动且占满剩余空间 - 底部菜单作为兄弟节点，不设
position，只加flex-shrink: 0; - 避免给
body直接设height: 100vh—— 夸克某些版本会因缩放/地址栏导致计算偏差
必须加 JS 监听 focusin 动态切定位
即使用了 flex，当 <input> 或 <textarea></textarea> 聚焦时，夸克仍可能触发视口重排，导致底部区域上浮。此时需 JS 强制干预：
立即学习“前端免费学习笔记（深入）”；
- 监听所有可聚焦元素的
focusin事件（比focus冒泡更可靠） - 在回调里用
setTimeout(() => { ... }, 0)确保 DOM 重排完成 - 读取
input.getBoundingClientRect().bottom和window.innerHeight，算出偏移量 - 临时将底部菜单设为
position: absolute; bottom: Xpx;（X =window.innerHeight - inputRect.bottom） -
blur后立刻切回默认 flex 布局状态
别踩这些坑
在夸克里，这几个常见操作反而会让问题更糟：
- 用
padding-bottom在主内容上预留空间 —— 键盘弹出后window.innerHeight变小，预设的 padding 就不够了，内容仍会被顶穿 - 依赖
@supports (bottom: env(keyboard-inset-bottom))—— 夸克完全不识别该变量，规则直接失效 - 给底部菜单加
z-index—— 遮挡本质不是层级问题，是位置错位，调 z-index 没用 - 用
sticky替代fixed—— 夸克对position: sticky; bottom: 0支持极差，多数情况退化成relative
真正起效的永远是「结构先行 + JS 补位」，尤其要注意 focusin 时机和 setTimeout 的必要性——少了这层延迟，getBoundingClientRect() 读到的还是键盘弹出前的位置。
