如何在保留文档流的前提下叠加元素，让后续内容排布在红色div下方

要实现元素叠加同时让后续内容遵循文档流，核心是让底层元素（红色div）保留在文档流中，再通过非脱离文档流的方式让上层元素（黑色div）与之叠加。以下是两种可行方案：

方案1：CSS Grid布局（推荐） #

利用Grid可以将多个元素放置在同一网格单元格的特性，无需脱离文档流即可实现叠加，同时红色div会正常占据空间，让World自然排布在其下方。

修改后的CSS代码： #

p {
  position: relative;
  z-index: 10;
}

.wrapper {
  display: grid; /* 启用Grid布局 */
}

#red {
  height: 300px;
  width: 300px;
  background-color: red;
  grid-area: 1 / 1; /* 指定红色div位于第一行第一列 */
}

#black {
  height: 200px;
  width: 200px;
  background-color: black;
  grid-area: 1 / 1; /* 让黑色div与红色div处于同一网格区域 */
  z-index: 4; /* 确保黑色div在红色div上方 */
}

HTML代码保持不变： #

<div class="wrapper">
  <p>Hello</p>
  <div id="red"></div>
  <div id="black"></div>
  <p>World</p>
</div>

方案2：负margin + 相对定位 #

通过负margin让黑色div向上移动覆盖红色div，同时红色div保留在文档流中维持空间布局。这种方式无需依赖Grid，兼容性更好。

修改后的CSS代码： #

p {
  position: relative;
  z-index: 10;
}

#red {
  height: 300px;
  width: 300px;
  background-color: red;
  /* 不设置position:absolute，保留在文档流 */
}

#black {
  height: 200px;
  width: 200px;
  background-color: black;
  margin-top: -200px; /* 向上移动自身高度，叠加到红色div上 */
  position: relative;
  z-index: 4; /* 确保黑色div层级更高 */
}

HTML代码保持不变： #

<div class="wrapper">
  <p>Hello</p>
  <div id="red"></div>
  <div id="black"></div>
  <p>World</p>
</div>

说明： #

• 两种方案都没有让红色div脱离文档流，因此World会自动排布在红色div下方。
• Grid方案语义化更强，代码更简洁；负margin方案兼容性更好，适合老旧浏览器场景。

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