如何将Content div放置在fixed定位的Header div下方？

核心问题 #

当给.header设置position: fixed后，该元素会脱离正常文档流，不再占据页面的物理空间。后续的.content元素会从页面顶部开始渲染，自然会和fixed定位的header产生重叠。同时，默认堆叠顺序下，DOM中靠后的元素（.content）会覆盖靠前的元素（.header），这就是你看到content在header上方的直接原因。

修复方案 #

1. 给content添加顶部外边距，避开header的空间 #

先确定header的高度，给content设置对应的margin-top，让它从header下方开始渲染：

.header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 60px; /* 示例header高度，可根据实际调整 */
  background: #ffffff; /* 添加背景色避免内容透过header显示 */
}

.content {
  margin-top: 60px; /* 值与header高度一致 */
}

<div class="header">Header</div>
<div class="content">Content</div>

2. 确保header在堆叠顺序中处于上层（可选） #

若设置margin后仍存在覆盖问题，可给header设置z-index提升堆叠层级：

.header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 60px;
  background: #ffffff;
  z-index: 999; /* 足够大的数值确保header处于上层 */
}

.content {
  margin-top: 60px;
}

调整后就能实现header固定在顶部、content在header下方正常显示的效果。

内容的提问来源于stack exchange，提问作者user3764769