如何让两个子div在父div内100%填充并重叠（禁用absolute）

要实现两个子div在父容器内100%填充并重叠，同时保留在父容器的文档流中，可通过以下两种方案实现：

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

<div id='parent' style="width: 200px; height: 200px; background-color: yellowgreen; display: grid;">
  <div id='child-1' style="width: 100%; height: 100%; background-color: orange; opacity: 0.5; grid-area: 1/1;"></div>
  <div id='child-2' style="width: 100%; height: 100%; background-color: dimgray; opacity: 0.5; grid-area: 1/1;"></div>
</div>

原理说明 #

• 父容器设置display: grid启用Grid布局
• 两个子div通过grid-area: 1/1指定占据网格的第1行第1列区域，强制重叠
• 该方式不脱离文档流，父容器尺寸仍由子元素（与父容器同宽高）维持，符合需求

方案二：负外边距（兼容旧浏览器场景） #

<div id='parent' style="width: 200px; height: 200px; background-color: yellowgreen; overflow: hidden;">
  <div id='child-1' style="width: 100%; height: 100%; background-color: orange; opacity: 0.5;"></div>
  <div id='child-2' style="width: 100%; height: 100%; background-color: dimgray; opacity: 0.5; margin-top: -200px;"></div>
</div>

原理说明 #

• 父容器设置overflow: hidden避免子元素负边距导致内容溢出
• 第二个子div通过margin-top: -200px（等于父容器高度）向上偏移，与第一个子div重叠
• 父容器高度由第一个子元素撑住，第二个子元素通过负边距实现重叠，全程保留在文档流内

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