根本原因是导航栏脱离文档流，position: absolute/fixed 导致后续元素无空间预留；应改用 relative 或用 padding-top 补偿高度，禁用 overflow:hidden 裁切下拉菜单，scroll-padding-top 必须作用于 html 元素。
横向导航栏遮挡下方内容，根本原因不是“层级不够高”，而是它脱离了文档流、没给后续元素留出空间——position: absolute 或 position: fixed 是罪魁祸首，z-index 只是表面症状。
为什么 position: absolute 会让导航栏“吃掉”标题？
它让 完全退出标准布局流程，浏览器渲染 时，就像导航栏根本不存在一样，直接从视口顶部开始排布。视觉上标题被“剪掉一半”，其实是它被压在导航栏底下。
- 检查 DevTools 的 Computed 面板，确认
nav的position值是不是absolute - 若确为
absolute，优先改用relative；若需固定定位，必须配合空间补偿 - 别指望只加
z-index能解决——没position，z-index就是废属性
position: fixed 导航栏怎么不遮正文？
它不占空间，但正文可以“绕开”。最稳的方式是：在第一个内容容器上加 padding-top，数值等于导航栏真实高度（含 border、padding、阴影扩散）。
- 打开 DevTools → 选中导航栏 → 看 Computed 中的
height+padding-top+border-top-width - 例如测得总高 64px，就给
加style="padding-top: 64px" - 避免写死在
上，否则响应式切换时（如移动端 navbar 变矮）会错位
下拉菜单被截断或点不了？先查 overflow: hidden
很多页面在 或更外层容器上写了 overflow: hidden，结果子级的 position: absolute 下拉菜单直接被裁掉——它不是层级低，是被父容器物理砍掉了。
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur
- 用 DevTools 的“Toggle element outline”功能快速扫一遍祖先节点，看哪一层突然没了下拉区域
- 找到后，把那层的
overflow: hidden改成overflow: visible或overflow: clip（后者更安全） - 如果必须保留
overflow: hidden（比如做图片裁切），就在下拉菜单的直接父级加position: relative和足够z-index，强制它突破裁切边界
scroll-padding-top 为什么写了没反应？
它只对 元素生效，写在 上基本白搭——尤其在 Safari 和 iOS WebKit 中静默失效。
- 必须写：
html { scroll-padding-top: 64px; } - 值要和你导航栏的真实高度一致，推荐用 CSS 变量统一管理：
:root { --nav-height: 64px; }，再html { scroll-padding-top: var(--nav-height); } - 如果同时设了
scroll-margin-top，两个值会叠加，导致锚点跳转后目标元素飘太高
真正容易被忽略的是：导航栏高度在不同设备、字体加载完成前后、甚至 JS 动态插入后都可能变化。靠一次测量写死一个像素值，不如用 JS 动态读取并更新 scroll-padding-top 或 padding-top，尤其是用了自定义字体或动画展开的导航栏。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
