本文讲解如何通过 css 定位与 html 结构优化，解决 wordpress 主题开发中页面内容被固定定位的 header 覆盖的问题，确保主体内容自然流式布局于 header 之下。
在 WordPress 主题开发中，当
根本原因在于：fixed 或 absolute 定位的元素不占据空间，浏览器不会为其预留高度。因此，必须手动为
✅ 正确解决方案（推荐）
1. 统一结构语义化（修复 HTML 层级）
首先，确保你的页面模板结构清晰、语义正确。当前 page.php 中存在嵌套冗余（如重复的 .d-flex.flex-column 和 .container-fluid），且 get_header() 被包裹在
<?php get_header(); ?>
<section class="page-wrap">
<div class="container">
<div class="row">
<div class="col-lg-3">
<?php if (is_active_sidebar('page-sidebar')) : ?>
<?php dynamic_sidebar('page-sidebar'); ?>
<?php endif; ?>
</div>
<div class="col-lg-9">
<h1><?php the_title(); ?></h1>
<?php if (has_post_thumbnail()) : ?>
<img src="<?php the_post_thumbnail_url('blog-large'); ? alt="如何让 WordPress 页面内容正确显示在固定头部下方" >"
alt="<?php the_title(); ?>"
class="img-fluid mb-3 img-thumbnail">
<?php endif; ?>
<?php get_template_part('includes/section', 'content'); ?>
</div>
</div>
</div>
</section>
<?php get_footer(); ?>✅ 关键点：get_header() 必须独立于内容容器之外，作为全局顶部区块先行加载；内容区域使用标准 Bootstrap .container + .row/.col 布局，避免干扰 header 流式行为。
2. 添加精准 CSS 间距控制
在主题样式表（如 style.css 或 assets/css/main.css）中加入以下 CSS：
中文 Word 文档自动化校对工具。当用户需要对中文文本或 Word 文档进行标点符号检查、语法检查、错别字检查时使用此 skill。触发词：语法检查、错别字、标点符号、校对、检查文档。
/* 固定定位的 header —— 确保其占据视口顶部 */
header {
position: fixed;
top: 0;
left: 0;
width: 100%;
z-index: 1030; /* Bootstrap navbar 默认 z-index，确保层级正确 */
}
/* 为页面主体预留 header 高度空间 */
.page-wrap {
padding-top: 120px; /* 根据实际 header 高度调整（含图片+nav） */
}
/* 响应式优化：小屏幕下 header 高度可能变化 */
@media (max-width: 768px) {
.page-wrap {
padding-top: 100px; /* 移动端折叠后 navbar 更矮 */
}
}? 如何确定 padding-top 值？
打开浏览器开发者工具（F12），选中
3. 进阶建议：避免全局 fixed 导致内容截断
若 header 包含高分辨率图片（如 header_image() 输出的大图），position: fixed 可能导致图片被裁剪或响应异常。更稳健的做法是：
- 将 header 分为两层：.header-sticky（仅导航栏 fixed） + .header-banner（相对定位的 banner 图）；
- 或使用 position: sticky（兼容性更好，IE 不支持，但现代主题可接受）：
header {
position: sticky;
top: 0;
z-index: 1030;
}✅ sticky 既保持滚动吸附效果，又保留在文档流中，后续内容自动避让——无需手动计算 padding-top。
⚠️ 注意事项
- 不要对 body 设置 margin-top 或 padding-top：易引发全站布局偏移；
- 避免在 header 内使用 height: 100vh 等绝对高度，会破坏自适应；
- 若使用了 Bootstrap 5+，确认 navbar-expand-md 在移动端是否正常折叠，未展开时高度变小，需媒体查询微调 padding-top；
- 务必在 wp_head() 前引入自定义 CSS，或使用 wp_enqueue_style() 注册样式，保证优先级。
通过以上结构梳理 + 精准 CSS 控制，你的页面内容将稳定显示在 header 下方，同时保持响应式与可维护性。这是 WordPress 主题开发中处理「粘性头部」的标准实践。
