position: fixed 使导航栏悬浮但脱离文档流，需用 padding-top 或 margin-top 预留空间；移动端需加 transform: translateZ(0) 防抖动；响应式时 left/right/width 要同步更新；z-index 失效多因层叠上下文隔离。

position: fixed 会让导航栏卡在视口顶部，但会脱离文档流

直接写 position: fixed 看似能悬停，但页面内容会“上滑”盖住导航栏下方区域——因为 fixed 元素不占空间。常见表现是：滚动时导航栏正常悬浮，但正文第一段被遮挡，像“少了一截”。

解决方法不是靠 JS 补高度，而是用 CSS 预留空间：

• 给 <body> 或主容器加 padding-top，值等于导航栏高度（比如 60px）
• 或者给紧接导航栏后的第一个元素加 margin-top，同样设为导航栏高度
• 别用 top: 0 + height: 100vh 这类组合，容易引发滚动条错位或底部留白

移动端 fixed 导航栏经常失效或抖动

iOS Safari 和部分安卓 WebView 对 position: fixed 支持不稳定，尤其在键盘弹出、页面缩放或快速滚动时，导航栏可能跳动、消失或错位。

关键不是换方案，而是加两行防御性 CSS：

立即学习“前端免费学习笔记（深入）”；

html-to-pptx-converter

使用 PptxGenJS 和 Python 解析，将结构化的 HTML/CSS 幻灯片内容转换为原生、可编辑的 PowerPoint（.pptx）演示文稿。

下载

• 给导航栏加 transform: translateZ(0)，触发硬件加速，减少重绘抖动
• 确保父容器没有 overflow: hidden 或 transform，否则会创建新的层叠上下文，把 fixed “关”进局部视口
• 避免在导航栏内用 input 或 textarea，iOS 下焦点切换会强制滚动并重置 fixed 定位

导航栏需要响应式收缩，但 fixed 布局让媒体查询变难处理

固定定位本身不阻碍媒体查询，但很多人在 @media 里只改 width 或 display，忘了 fixed 元素的 left/right 值没同步更新，导致小屏下导航栏溢出或贴边错位。

实操要点：

• 所有位置控制属性（left、right、width）都应在同一断点内统一声明
• 用 max-width 替代 width 更安全，避免大屏下撑满整个视口
• 汉堡菜单的 transform: translateX() 动画，要确保父容器有 overflow: hidden，否则滑出部分仍可点击

z-index 不生效？多半是层叠上下文搞的鬼

导航栏明明写了 z-index: 1000，却被轮播图或弹窗盖住，不是数值不够大，而是它和遮罩层不在同一个层叠上下文里。

检查顺序比调数字更重要：

• 先确认导航栏父级没有 position: relative + z-index: 1 这种“低层级封印”
• 遮罩层（如 .modal-overlay）必须和导航栏同级或更外层，不能嵌套在某个 position: relative 的卡片内部
• 如果用了 Web Component 或 Shadow DOM，z-index 默认不跨边界，得在 shadow root 外控制

复杂点在于：fixed 元素的层叠等级由其最近的「定位祖先」决定，而不是 DOM 深度。这点容易被忽略，一查就发现导航栏其实被包在了一个带 z-index: 2 的 header 里，而那个 header 自己又在一个 z-index: 1 的 wrapper 中 —— 最终它只在 wrapper 内部“高”，出不去。