本文讲解如何通过 css 定位与 html 结构优化，解决 wordpress 主题开发中页面内容被固定定位的 header 覆盖的问题，确保主体内容自然流式布局于 header 之下。
在 WordPress 主题开发中，当
根本原因在于：fixed 或 absolute 定位的元素不占据空间，浏览器不会为其预留高度。因此，必须手动为
✅ 正确解决方案（推荐）
1. 统一结构语义化（修复 HTML 层级）
首先，确保你的页面模板结构清晰、语义正确。当前 page.php 中存在嵌套冗余（如重复的 .d-flex.flex-column 和 .container-fluid），且 get_header() 被包裹在
✅ 关键点：get_header() 必须独立于内容容器之外，作为全局顶部区块先行加载；内容区域使用标准 Bootstrap .container + .row/.col 布局，避免干扰 header 流式行为。
2. 添加精准 CSS 间距控制
在主题样式表（如 style.css 或 assets/css/main.css）中加入以下 CSS：
/* 固定定位的 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 主题开发中处理「粘性头部」的标准实践。
