position: fixed 最稳，因其不依赖滚动监听、不触发重排、兼容 ie9+ 且行为确定；需同步处理遮挡（如 body padding-top）和响应式高度变化（如 scroll-margin-top 或 js 动态更新）。
直接用 position: fixed 最稳，但必须同步处理遮挡和响应式高度变化这两个坑。
为什么 position: fixed 是首选
它不依赖滚动监听、不触发重排、兼容性覆盖 IE9+，且行为确定：元素脱离文档流，始终锚定视口顶部。相比 position: sticky，它在 Safari 旧版本或嵌套滚动容器中更可靠。
常见错误现象：nav 设置了 fixed，但页面一滚动，下面的内容就“消失”在导航栏底下——这不是 bug，是预期行为。
-
top: 0和left: 0必须同时写，避免某些安卓 WebView 偏移 -
width: 100%不可省略，否则宽度只包裹内容，可能错位 -
z-index至少设为100，低于99容易被 modal 或 banner 覆盖 - 背景色必须显式声明（如
background-color: #fff），否则滚动时下方文字会透出
怎么防止内容被导航栏遮住
固定定位让 nav 脱标，后续第一个块级元素会顶到页面顶部，自然被盖住。解决方式不是 JS 计算，而是纯 CSS 预留空间。
- 如果导航栏高度固定（比如
height: 60px），给body或主内容容器加padding-top: 60px（推荐）或margin-top: 60px - 如果高度不固定（如响应式折叠菜单、多行 logo），
padding-top会失效，此时改用scroll-margin-top配合锚点跳转 - 不要对
body用margin-top：它可能破坏html { height: 100% }布局逻辑
示例：.main-content { padding-top: 60px; } —— 简单、可继承、无副作用。
scroll-margin-top 解决锚点跳转遮挡
用户点击「关于我们」链接，scrollIntoView 滚动到 #about 区块，但顶部被导航栏挡住。这时不用 JS 监听滚动再偏移，CSS 一行就能修好。
- 给目标区块加
scroll-margin-top: 60px（值 ≈ 导航栏高度） - 该属性仅在滚动定位生效，不影响正常布局流
- 兼容 Chrome 69+、Firefox 68+、Safari 15.4+；IE 完全不支持，但 IE 用户本来就不会用锚点跳转
- 若导航栏高度响应式变化（如移动端缩为 48px），可配合媒体查询：
@media (max-width: 768px) { #about { scroll-margin-top: 48px; } }
别忽略的细节：字体渲染与阴影
固定导航栏在滚动时容易出现文字模糊或边缘锯齿，尤其在 macOS + Chrome 组合下。
- 加
backface-visibility: hidden或transform: translateZ(0)强制 GPU 加速 - 避免用
box-shadow: 0 0 10px rgba(0,0,0,0.1)，半透明阴影在 fixed 元素上滚动时易闪烁；改用box-shadow: 0 2px 4px rgba(0,0,0,0.08) - 如果导航栏含图标字体（如 Font Awesome），确保
font-smoothing一致：-webkit-font-smoothing: antialiased
最复杂的其实是高度动态变化的场景——比如桌面端带二级菜单、移动端收起后高度减半。这种情况下，padding-top 和 scroll-margin-top 都得靠 JS 动态更新，但出发点仍是先写死 CSS，再按需增强。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
