用 position: fixed 实现底部导航栏需设 z-index、body padding-bottom、固定高度及 viewport-fit=cover，避免 iOS 错位与遮挡；absolute 因依赖定位上下文不稳定，不适用；内容短时“悬浮”属正常，如需撑不满时贴底应改用 Flex 布局。
用 position: fixed 实现底部横向导航栏
直接加 position: fixed; bottom: 0; left: 0; right: 0; 就能贴底，但光写这三行大概率出问题——内容被遮、小屏错位、iOS 上消失，都是因为漏了配套处理。
必须同步做这几件事：
-
z-index要设（比如z-index: 999），否则可能被轮播图、弹窗盖住 -
body得加padding-bottom，值等于导航栏高度（如56px），不然滚动到底部时最后一行文字被盖住 - 导航容器要设固定高度（别用
100%或vh），否则在 Safari 地址栏收放时会跳变 - 移动端必须加
viewport-fit=cover，否则 iPhone X+ 的圆角和 Home Indicator 会把导航栏裁掉
为什么 position: absolute 不适合做“始终在底部”的导航栏
position: absolute + bottom: 0 看似能定位到底部，但它依赖最近的「已定位祖先」。如果父容器没设 position: relative，它就相对于 定位；一旦页面有 transform、scale 或滚动容器（比如 overflow: auto 的 wrapper），它的位置就会偏移甚至失效。
而 fixed 是相对于视口，不随滚动或缩放漂移，更稳。除非你明确需要它随某个局部容器滚动（极少见），否则别用 absolute 替代 fixed。
移动端 iOS Safari 的真实坑：键盘弹出后导航栏错位
iOS Safari 在唤起软键盘时，会重算视口高度，导致 bottom: 0 的导航栏被顶到屏幕中间，甚至消失。这不是 bug，是它的行为逻辑。
缓解方案只有两个：
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur
- 避免在固定导航栏内部放
或—— 把输入框移到主内容区 - 给导航栏容器加
padding-bottom: env(safe-area-inset-bottom)，同时确保包含viewport-fit=cover，否则env()不生效
内容太短时，底部导航栏“悬浮”而非“贴底”怎么办
这是正常现象：fixed 元素永远贴视口底，不是贴页面底。如果你要的是“内容少时贴底、内容多时随滚动隐藏”，那它就不是 fixed 的使用场景。
真正要实现“sticky bottom”（即撑不满一屏时贴底，满屏后随滚动上移），得用 Flex 布局：
body { display: flex; flex-direction: column; min-height: 100vh; }main { flex: 1; }-
footer { height: 56px; }（不用fixed）
这种方案下，导航栏是文档流一部分，不会遮内容，也不需 padding-bottom，但失去“始终可见”特性——它只在页面底部存在，不随滚动固定。
实际项目里，选 fixed 还是 Flex，取决于你要的是“始终可见的工具栏”还是“语义化页脚”。别混用，也别指望一个 CSS 属性解决所有场景。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
