当页面中使用 position: fixed 定位页眉时，内容区域会因脱离文档流而被遮挡；需通过为内容添加 margin-top（值 ≥ 页眉高度）或使用 padding-top 配合 body 布局，才能确保其完整可见。
当页面中使用 `position: fixed` 定位页眉时，内容区域会因脱离文档流而被遮挡；需通过为内容添加 `margin-top`（值 ≥ 页眉高度）或使用 `padding-top` 配合 `body` 布局，才能确保其完整可见。
在 CSS 布局中，position: fixed 会使元素完全脱离标准文档流——它不再占据页面空间，后续元素（如 .content）会“无视”它的存在，从视口顶部开始渲染，从而被固定头部覆盖。这并非 ChatGPT 错误，也不是开发者理解有误，而是 fixed 定位的固有行为。
✅ 正确解决方案有两种主流方式：
方案一：为内容区域设置 margin-top（推荐初学者使用）
给 .content 添加足够大的上边距，使其“下移”到固定头部下方：
.header {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 60px; /* 明确设定高度便于计算 */
background: #333;
color: white;
display: flex;
align-items: center;
justify-content: center;
}
.content {
margin-top: 60px; /* 必须 ≥ .header 的 height */
padding: 20px;
background: #f9f9f9;
}<div class="header">导航栏</div> <div class="content"> <h2>页面主要内容</h2> <p>此处内容将清晰显示在头部下方，不会被遮挡。</p> </div>
⚠️ 注意事项：
- margin-top 的值必须 ≥ 固定元素的实际高度（建议显式设置 .header 的 height，避免依赖不确定的行高或内边距）；
- 若头部高度响应式变化（如移动端折叠），需配合媒体查询或 CSS 自定义属性动态调整；
- 不要对 .content 也设 position: fixed 或 absolute，否则会再次脱离流，失去 margin 效果。
方案二：为 <body> 设置 padding-top（语义更优，适合全站统一布局）
让整个页面内容区整体下移，保持文档流完整性：
body {
margin: 0;
padding-top: 60px; /* 与 .header 高度一致 */
}
.header {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 60px;
background: #2c3e50;
color: white;
z-index: 1000;
}此方式无需修改每个内容区块的样式，更适合多组件复用场景。
? 总结：
position: fixed 不等于“视觉上固定 + 空间上保留”，它本质是“视觉固定 + 空间释放”。解决遮挡问题的关键不是改变 HTML 结构顺序（.content 放在 .header 后已正确），而是主动为后续内容预留垂直空间。掌握这一原理，即可从容应对导航栏、悬浮按钮、返回顶部等常见固定定位场景。
