用 position: fixed 实现固定导航需同步处理 top: 0、width: 100%、body padding-top、background-color 及父容器 transform/overflow 等问题，否则内容被遮、定位异常；position: sticky 则需满足 top: 0、无干扰父容器样式、足够滚动空间及兼容前缀等条件才能生效。
直接用 position: fixed 就行，但只加这一条会出问题——内容被盖住、导航偏移、移动端错位，全是连锁反应，必须同步处理。
为什么 position: fixed 加了却“看不见”或“遮内容”
fixed 元素完全脱离文档流，浏览器不会为它留位置，后续内容直接顶上来被盖住。这不是样式没生效，是布局逻辑断了。
- 漏设
top: 0和width: 100%：导航会卡在默认位置或缩成一条线 -
body或主容器没加padding-top（值必须等于导航实际高度）：首屏文字大概率被截断 - 导航本身没设
background-color：滚动时底下内容透出来，误以为“没固定” - 父容器用了
transform、overflow: hidden或will-change：导致z-index分层失效，导航被压在底层
position: sticky 在横向导航里为什么不动
sticky 不是兼容性问题，是触发条件太敏感——它只在滚动到临界点时才“吸附”，否则静默退化为 relative。
- 父容器有
overflow: hidden、overflow: auto或transform：sticky 直接失效，毫无提示 - 没写
top: 0，或兄弟元素总高度 ≤ 视口高度：滚不到触发点，永远不吸附 - 旧版 Safari 需要
position: -webkit-sticky前缀，只写position: sticky会不生效 - 导航高度不固定（比如响应式菜单展开后变高）：sticky 无法自动适配，此时必须切回
fixed+ JS 动态计算
横向导航结构 + 固定定位的实操要点
横向排列本身和固定是两件事，别混着调。先确保菜单能横过来，再让它固定。
DeepBI DHTML 页面生成器
下载
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur
立即学习“前端免费学习笔记（深入）”；
- 横向布局优先用
display: flex，比float更稳：.navbar ul { display: flex; } - 下拉菜单的父级
li必须设position: relative，否则子菜单position: absolute会相对整个页面定位 - 移动端软键盘弹出时，Android Chrome 和部分 iOS WebView 会重算视口高度，fixed 导航可能被顶到中间——这不是 bug，是浏览器行为，得靠
viewport设置或监听resize事件微调 - 锚点跳转后标题常被遮住，补一句
h1, h2 { scroll-margin-top: 60px; }，浏览器原生支持，不用 JS
同时有顶部固定导航和底部固定栏时怎么避坑
两个 fixed 元素本身不冲突，但正文区域容易被夹在中间“看不见”。
- 顶部占高 60px、底部占高 40px → 正文区域必须避开上下共 100px 空间
- 错误做法：只给
main设margin-top: 60px，却没设margin-bottom: 40px，滚动到底时底部栏会盖住最后一行文字 - 更稳妥：用
padding-top和padding-bottom控制正文区域，并确保main有box-sizing: border-box - 如果底部栏高度动态变化（比如从 40px 变成 60px），硬编码的 padding 就会失效，这时得用 CSS 自定义属性或
clamp()配合变量
最麻烦的不是怎么写 fixed，而是 fixed 后所有关联空间都要手动对齐——导航高度、padding 值、scroll-margin、z-index 层级、移动端软键盘重绘……漏一个，整个导航就“看起来不对”。
