用 position: fixed 做顶部导航栏需三步：钉住顶部（top: 0; left: 0; width: 100%; z-index: 1000; box-sizing: border-box）、避免遮挡正文（body 加 padding-top 或主内容加 margin-top）、解决 iOS 兼容与锚点偏移问题（transform: translateZ(0)、scroll-margin-top）。
用 position: fixed 做顶部导航栏，核心就三步：让导航栏“钉”在视口顶部、防止它压住下面的内容、确保它始终显示在最前面。
基础样式：定位 + 尺寸 + 层级
导航栏必须明确指定位置和尺寸，否则不会如预期显示：
-
top: 0; left: 0; —— 这两个值缺一不可，只写
position: fixed不会自动贴顶 - width: 100%; —— 否则宽度由内容决定，无法横跨全屏
- z-index: 1000; —— 避免被其他元素（比如弹窗、轮播图）盖住
- box-sizing: border-box; —— 确保 padding 和 border 不撑宽，方便精确控制高度
关键处理：避免正文被遮挡
因为 fixed 元素脱离文档流，正文会直接从页面最顶端开始渲染，导致首屏内容被导航栏挡住：
- 给
加 padding-top，值等于导航栏实际高度（例如padding-top: 64px） - 别用估算值——如果导航栏含响应式菜单或随字号变化，建议用 JS 动态读取：
navbar.getBoundingClientRect().height - 也可以给主内容区加
margin-top，效果类似，但 body 上统一加更简洁
移动端兼容：iOS Safari 的常见坑
iOS Safari 对 position: fixed 支持有历史问题，滚动时容易闪烁或跳动：
- 给导航栏加 transform: translateZ(0) 或 will-change: transform，强制硬件加速
- 避免同时设置
top: 0和bottom: 0，iOS 可能尝试拉伸元素引发错位 - 慎用
height: 100vh—— iOS 地址栏收放会改变vh值，造成高度突变
锚点跳转不被遮盖
点击链接跳转到页面某区块时，目标元素顶部常被导航栏盖住：
- 推荐用 CSS 属性 scroll-margin-top，例如给目标标题加：
h2 { scroll-margin-top: 70px; } - 兼容老浏览器可配合 JS 滚动调整：
window.scrollBy(0, -70)，但需节流防卡顿
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
