导航栏必须紧接在标签后才能自然居顶，靠html文档流顺序而非css强行定位；若用position: fixed则需给body设等高padding-top，且每个必须添加中文aria-label明确功能。
导航栏必须放在 开头位置才能自然居顶
导航栏在页面顶部显示，不是靠 position: fixed 或 top: 0 “拉上去”的，而是靠 HTML 文档流天然顺序决定的。如果你发现导航栏总在内容下面，大概率是它在 HTML 中写得太靠后了。
-
<nav></nav>标签应紧接在开始标签之后，不要被<header></header>、<img>或其他内容挡在前面 - 避免用
margin-top: -100px或position: relative; top: -50px强行上移——这会让语义结构错乱，且破坏可访问性与打印样式 - 如果用了
position: fixed，仍需保证 DOM 顺序合理：否则屏幕阅读器会先读到正文，再跳回顶部导航，逻辑断裂
多个
一个页面出现多个导航区域（比如顶部主菜单、侧边分类、页脚链接、面包屑），仅靠 CSS 类名或位置无法让辅助技术识别其功能。读屏软件会把它们全念成“导航”，用户根本分不清哪个是“去首页”、哪个是“返回上一级”。
- 每个
<nav></nav>都要加aria-label，值用简短中文，如aria-label="主导航"、aria-label="文章分类导航" - 面包屑推荐用
aria-labelledby关联标题，例如：<nav aria-labelledby="bc-title"><h2 id="bc-title">当前位置</h2>...</nav> - 禁止写
aria-label="Footer navigation"这类英文值，也不要用模糊描述如"nav-2"或"bottom-nav"
固定定位时 body 必须预留等高 padding-top
用 position: fixed 让导航栏贴顶后，页面正文会直接从视口顶部开始渲染，结果就是第一屏内容被导航栏盖住。这不是 bug，是 fixed 脱离文档流的必然行为。
- 给
加padding-top，值必须严格等于导航栏实际高度（含 border/padding），例如padding-top: 60px - 别用
margin-top：它会在 body 外部撑开空白，导致滚动条初始位置异常 - 如果导航高度响应式变化（比如移动端折叠后变矮），padding-top 也得用媒体查询同步调整，否则小屏下留白过大或遮挡内容
sticky 导航失效时优先检查父容器 overflow 和 transform
position: sticky 看起来比 fixed 更聪明，但非常娇气。一旦父元素设置了 overflow: hidden、overflow: auto 或任何 transform（哪怕只是 transform: translateZ(0)），sticky 就立刻失效，退化为普通 relative 定位。
- 把
<nav></nav>直接放在下，是最稳妥的做法；若必须嵌套，检查每一层父容器的 CSS - Chrome DevTools 的 Elements 面板里，右键检查
<nav></nav>元素 → Computed → 查看position是否真的生效，而不是显示static - IE 不支持 sticky，如需兼容，要么降级用 fixed + JS 监听 scroll，要么放弃粘性效果
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
