直接结论：用 position: fixed + top: 0 实现始终置顶必须同步处理内容遮挡和层级覆盖，否则易失效；根本原因是 fixed 元素脱离文档流导致内容重叠，且未设 z-index 时可能被其他定位元素覆盖。
直接结论：用 position: fixed + top: 0 就能实现始终置顶，但必须同步处理两件事——内容遮挡和层级覆盖，否则在真实页面中大概率失效。
为什么导航栏会“消失”或被遮住
常见错误现象是：导航栏写了 position: fixed，刷新后确实贴顶了，但一滚动，文字或图片就盖在它上面；或者首页看着正常，进到某个模块（比如轮播图、弹窗、广告位）后导航栏突然看不见了。
根本原因有两个：
- position: fixed 让元素脱离文档流，后续内容不会自动让位，导致重叠
- 没设 z-index，而页面里某个 position: absolute 或 position: relative 元素意外创建了更高层叠上下文
所以光写 position: fixed 是不够的。
position: fixed 必须配齐的 CSS 属性
只设 position: fixed 和 top: 0 是半成品。以下属性缺一不可：
-
left: 0和right: 0（比width: 100%更可靠，避免缩放/滚动条宽度变化时漏边） -
z-index: 1000（不是越大越好，但必须明确高于页面其他定位元素；999在某些框架里可能不够） -
background-color（透明背景在滚动时会暴露下方内容，不是“看不见”，而是“看不清”） -
box-shadow或border-bottom（视觉上强化分隔，避免文字紧贴边缘显得拥挤）
怎么防止主体内容被导航栏挡住
这不是可选项，是必做项。固定定位不占文档流空间，body 第一个子元素默认从 top: 0 开始渲染，正好被导航栏盖住。
推荐做法是给 body 加 padding-top，而不是给第一个 section 加 margin-top：
- 值取导航栏实际高度（例如
padding-top: 64px），别凭空猜 - 如果导航栏高度响应式变化（比如移动端变矮），用
@media单独覆盖padding-top - 避免用
margin-top在内容容器上——当该容器有position: relative或触发 BFC 时，行为可能异常
移动端和高 DPI 屏幕容易忽略的细节
PC 上跑通不代表手机没问题。几个真实踩坑点：
- iOS Safari 对
position: fixed的支持曾长期不稳定，尤其在输入框聚焦、页面缩放后；加transform: translateZ(0)可强制硬件加速修复部分抖动 - 安卓部分浏览器（如旧版 UC）对
z-index层叠逻辑有偏差，建议所有可能覆盖导航栏的组件（模态框、下拉菜单、广告浮层）显式声明z-index，且值要低于导航栏 - 高 DPI 屏幕下，如果导航栏用 px 写死高度（如
height: 48px），在 2x 屏上可能显得过窄；改用rem或em更稳妥
真正麻烦的从来不是写那几行 CSS，而是验证它在各种组合场景下是否还“始终置顶”——比如弹出键盘、横竖屏切换、页面内嵌 iframe、第三方 SDK 注入 DOM 后。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
