position: fixed 使导航栏悬浮但脱离文档流，需用 padding-top 或 margin-top 预留空间；移动端需加 transform: translatez(0) 防抖动；响应式时 left/right/width 要同步更新；z-index 失效多因层叠上下文隔离。
position: fixed 会让导航栏卡在视口顶部，但会脱离文档流
直接写 position: fixed 看似能悬停，但页面内容会“上滑”盖住导航栏下方区域——因为 fixed 元素不占空间。常见表现是：滚动时导航栏正常悬浮，但正文第一段被遮挡，像“少了一截”。
解决方法不是靠 JS 补高度，而是用 CSS 预留空间：
- 给
或主容器加padding-top，值等于导航栏高度（比如60px） - 或者给紧接导航栏后的第一个元素加
margin-top，同样设为导航栏高度 - 别用
top: 0+height: 100vh这类组合，容易引发滚动条错位或底部留白
移动端 fixed 导航栏经常失效或抖动
iOS Safari 和部分安卓 WebView 对 position: fixed 支持不稳定，尤其在键盘弹出、页面缩放或快速滚动时，导航栏可能跳动、消失或错位。
关键不是换方案，而是加两行防御性 CSS：
立即学习“前端免费学习笔记（深入）”；
- 给导航栏加
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 内部“高”，出不去。
