使用 padding-top 或 margin-top 为页面内容添加与固定导航栏等高的偏移量，避免内容被遮挡。推荐在 body 上设置 padding-top: 60px 或为主内容容器设置 margin-top: 60px，确保值与导航栏高度一致；响应式场景下需配合 CSS 变量或媒体查询动态调整，锚点跳转时可结合 J*aScript 修正滚动位置。

导航栏使用 position: fixed 后脱离文档流，导致页面内容从顶部开始渲染，被导航栏遮挡。解决方法是给页面内容区域增加向下的偏移，留出导航栏的高度空间。

使用 padding-top 修正

在主体内容的容器（如 或主 <div>）上设置 <strong>padding-top</strong>，值等于固定导航栏的高度。<font>例如导航栏高度为 60px：</font><p><font>```<a style="color:#f60; text-decoration:underline;" title="css" href="https://www.php.cn/zt/15716.html" target="_blank">css</a><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>.m<a style="color:#f60; text-decoration:underline;" title="ai" href="https://www.php.cn/zt/17539.html" target="_blank">ai</a>n-content {<br> margin-top: 60px;<br>}</font></p> <div class="aritcle_card"> <a class="aritcle_card_img" href="/ai/2268"> <img src="https://img.php.cn/upload/ai_manual/001/246/273/68b6b69145e34946.png" alt="AI Code Reviewer"> </a> <div class="aritcle_card_info"> <a href="/ai/2268">AI Code Reviewer</a> <p>AI自动审核代码</p> <div class=""> <img src="/static/images/card_xiazai.png" alt="AI Code Reviewer"> <span>112</span> </div> </div> <a href="/ai/2268" class="aritcle_card_btn"> <span>查看详情</span> <img src="/static/images/cardxiayige-3.png" alt="AI Code Reviewer"> </a> </div> <font>这种方法更灵活，只影响特定区域，适合局部布局调整。</font><h3>注意事项</h3> <font>确保设置的 padding-top 或 margin-top 值与导航栏实际高度一致，可通过开发者<a style="color:#f60; text-decoration:underline;" title="工具" href="https://www.php.cn/zt/16887.html" target=";_blank">工具</a>测量。</font><font>如果页面有锚点跳转（如 #section1），还需考虑滚动偏移，可结合 J*aScript 微调滚动位置。</font><font><a style="color:#f60; text-decoration:underline;" title="响应式设计" href="https://www.php.cn/zt/27273.html" target="_blank">响应式设计</a>中，导航栏高度可能变化，建议使用 CSS 变量或媒体查询适配不同屏幕。</font><p>基本上就这些，不复杂但容易忽略。</p> </div>

以上就是css导航栏固定后内容被遮挡怎么办_使用padding-top或margin-top修正的详细内容，更多请关注其它相关文章！

# css  # javascript  # java  # 工具  # ai  # 解决方法  # 响应式设计  # 跳转  # 两种类型  # 选择器  # 相关文章  # 中文网  # 解决问题  # 可通过  # 还需  # 查看详情  # seo 推广薪资  # it科教网站建设  # 高质量网站推广  # 东营网站建设研究  # 白云seo推广优化外包  # seo推广供应商  # 论坛推广的网站是什么  # 气动关键词排名怎么排序  # 如何搞网站推广代理商  # 大连网站优化谁家好做些