使用 padding-top 或 margin-top 为页面内容添加与固定导航栏等高的偏移量，避免内容被遮挡。推荐在 body 上设置 padding-top: 60px 或为主内容容器设置 margin-top: 60px，确保值与导航栏高度一致；响应式场景下需配合 CSS 变量或媒体查询动态调整，锚点跳转时可结合 JavaScript 修正滚动位置。
导航栏使用 position: fixed 后脱离文档流，导致页面内容从顶部开始渲染，被导航栏遮挡。解决方法是给页面内容区域增加向下的偏移，留出导航栏的高度空间。
使用 padding-top 修正
在主体内容的容器（如）上设置 padding-top，值等于固定导航栏的高度。例如导航栏高度为 60px：```css
body {
padding-top: 60px;
margin: 0;
}
这样整个页面内容会整体下移 60px，避开导航栏遮挡。使用 margin-top 修正
也可以给紧随导航栏之后的内容容器设置 margin-top，实现类似效果。例如：```css
.main-content {
margin-top: 60px;
}
这种方法更灵活，只影响特定区域，适合局部布局调整。注意事项
确保设置的 padding-top 或 margin-top 值与导航栏实际高度一致，可通过开发者工具测量。如果页面有锚点跳转（如 #section1），还需考虑滚动偏移，可结合 JavaScript 微调滚动位置。响应式设计中，导航栏高度可能变化，建议使用 CSS 变量或媒体查询适配不同屏幕。基本上就这些，不复杂但容易忽略。
立即学习“前端免费学习笔记（深入）”；
