position: fixed 导航栏需加 body padding-top 避免内容上移遮挡，优先用 position: sticky; top: 0 并确保父容器有高度且无 overflow 截断，下拉菜单须在 relative 父元素内 absolute 定位并设合理 z-index。
为什么 position: fixed 后导航栏错位或遮挡内容
直接加 position: fixed 到 <nav></nav> 上，常导致两个问题：一是导航栏脱离文档流后，下方内容会“上移”顶到顶部，被遮住；二是滚动时菜单项文字模糊、iOS Safari 中闪烁。这不是 CSS 写错了，而是没补全配套处理。
关键点在于：fixed 元素不占空间，所以必须手动给 或紧接其后的主内容容器加 padding-top，值至少等于导航栏高度（含 border/padding）。否则视觉上就是“内容被吃掉了一截”。
- 别用
top: 0; left: 0; width: 100%硬撑——它在小屏下可能溢出横向滚动条 - 避免
transform: translateZ(0)强制硬件加速，iOS 上反而触发渲染 bug - 优先用
position: sticky; top: 0;替代fixed：它只在滚动到临界点才吸附，天然保留原始占位，不用额外 padding
position: sticky 在导航栏中怎么写才真正生效
sticky 不是“写了就粘”，它依赖父容器的约束条件。最常见失效原因是父级没设 height 或 overflow，导致浏览器无法判断“临界点”在哪里。
-
<nav></nav>必须是某个有明确高度/内容边界的块级元素的**直接子元素**（比如<header></header>或） - 父容器不能有
overflow: hidden|auto，否则 sticky 会被截断 - 必须显式声明
top: 0（或top: 1rem等具体值），top: auto不触发吸附 - 在 Flex/Grid 容器里，需确认父容器未设
align-items: flex-start类似限制垂直位置的属性
示例最小可行结构：
<nav style="position: sticky; top: 0; z-index: 100;"><ul><li><a href="#">首页</a></li></ul></nav><main>...内容...</main>
移动端 fixed/sticky 导航栏点击区域失效或跳转异常
在 iOS Safari 和部分安卓 WebView 中，fixed 或 sticky 导航栏里的 <a></a> 点击无反应、延迟，或点完页面滚回顶部——这通常不是 JS 干扰，而是 viewport 设置和链接语义问题。
- 确保
里有正确的<meta name="viewport" content="width=device-width, initial-scale=1.0">，缺了它，fixed 元素尺寸计算会错乱 - 避免给导航链接写空
href="#"：点击后页面跳到顶部，且会触发重排；应改用href="/"或移除href，加role="button"和tabindex="0" - 如果用了纯 CSS 折叠菜单（如
<input type="checkbox">+~ .nav-menu），确保该input没被display: none隐藏——要用position: absolute; opacity: 0; clip: rect(0 0 0 0);
z-index 和层叠上下文导致下拉菜单被盖住
固定导航栏里嵌下拉菜单，经常出现“鼠标悬停，子菜单一闪就消失”或“被轮播图/弹窗盖住”。这不是 hover 写错了，而是 z-index 被父级层叠上下文截断。
-
<nav></nav>设了z-index: 100，但它的父容器（比如<header></header>）没设position，导致z-index不生效 - 下拉菜单的
position: absolute必须相对于一个已设position: relative的父<li>，否则会向上找最近的定位祖先，可能落到上，滚动时飘走 - 不要给
<nav></nav>设过高的z-index（如 9999），容易和第三方组件冲突；一般 100–200 足够，下拉菜单设 101 即可
真正稳的写法：
<nav style="position: sticky; top: 0; z-index: 100;"><ul>
<li style="position: relative;">
<a href="#">产品</a>
<ul class="dropdown" style="position: absolute; top: 100%; left: 0; z-index: 101;">
<li><a href="/pro-a">A系列</a></li>
</ul>
</li>
</ul></nav>
复杂点在于 sticky 和下拉菜单的组合需要同时满足定位链、层叠顺序、无障碍焦点三者不冲突——多数线上故障，其实卡在第一个 position: relative 没加对地方。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
