使用 padding-top 或 margin-top 为页面内容添加与固定导航栏等高的偏移量，避免内容被遮挡。推荐在 body 上设置 padding-top: 60px 或为主内容容器设置 margin-top: 60px，确保值与导航栏高度一致；响应式场景下需配合 CSS 变量或媒体查询动态调整，锚点跳转时可结合 JavaScript 修正滚动位置。
导航栏使用 position: fixed 后脱离文档流，导致页面内容从顶部开始渲染，被导航栏遮挡。解决方法是给页面内容区域增加向下的偏移，留出导航栏的高度空间。
使用 padding-top 修正
在主体内容的容器（如<div>）上设置 <strong>padding-top</strong>，值等于固定导航栏的高度。<font>例如导航栏高度为 60px：</font><p><font>```css<br>body {<br> padding-top: 60px;<br> margin: 0;<br>}</font></p>
<font>这样整个页面内容会整体下移 60px，避开导航栏遮挡。</font><h3>使用 margin-top 修正</h3>
<font>也可以给紧随导航栏之后的内容容器设置 <strong>margin-top</strong>，实现类似效果。</font><font>例如：</font><p><font>```css<br>.main-content {<br> margin-top: 60px;<br>}</font></p><div class="aritcle_card flexRow">
<div class="artcardd flexRow">
<a class="aritcle_card_img" href="/xiazai/skill9868" title="Java注释规范Skills"><img
src="https://img.php.cn/upload/skill/001/246/273/6adaf20dbae7c507.jpg" alt="Java注释规范Skills" ></a>
<div class="aritcle_card_info flexColumn">
<a href="/xiazai/skill9868" title="Java注释规范Skills">Java注释规范Skills</a>
<p>当用户要求为 Java 代码添加注释、修改注释、审查注释、整理注释格式，或要求按照代码注释规范处理 Java 文件时，使用本技能。本技能用于统一生成和维护 Java 类注释模板、按 Git 对比 release 判断版本号、补充每行代码上方中文块注释、调整注释空行规则，并保持 Java 文件 UTF-8 无 BOM 编码。典型触发场景包括：补充类注释、更新 @version、检查 @author 来源、整理行尾注释、把注释放到代码上一行、检查注释是否符合规范、构建前检查 Java 注释风格。</p>
</div>
<a href="/xiazai/skill9868" title="Java注释规范Skills" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span> </a>
</div>
</div>
<font>这种方法更灵活，只影响特定区域，适合局部布局调整。</font><h3>注意事项</h3>
<font>确保设置的 padding-top 或 margin-top 值与导航栏实际高度一致，可通过开发者工具测量。</font><font>如果页面有锚点跳转（如 #section1），还需考虑滚动偏移，可结合 JavaScript 微调滚动位置。</font><font>响应式设计中，导航栏高度可能变化，建议使用 CSS 变量或媒体查询适配不同屏幕。</font><p>基本上就这些，不复杂但容易忽略。</p>
<p><span>立即学习</span>“<a href="https://pan.quark.cn/s/cb6835dc7db1" style="text-decoration: underline !important; color: blue; font-weight: bolder;" rel="nofollow" target="_blank">前端免费学习笔记（深入）</a>”；</p>
</div> 
