为何仅设置宽高未定位的div会垂直排列而非重叠？

嘿，这事儿其实是HTML元素的默认布局规则在起作用！你用的<div>标签，默认的display属性是block——也就是块级元素。块级元素的核心特性就是独占一行，不管你给它设置了多宽多高，它都会自动把后面的元素挤到下一行去，所以才会出现垂直排列的效果，而不是你预想的重叠。

想要让它们重叠，你需要让这些div脱离默认的文档流，常见的方法有这几种：

方法1：使用绝对定位（最常用） #

给每个div设置position: absolute，这样它们就会脱离文档流，不再占据自己的空间，而是相对于最近的已定位父元素（如果没有的话就相对于视口）定位，自然就会重叠在一起了。如果需要相对于某个容器定位，记得给父容器加position: relative。

修改后的代码示例：

<!-- 可以加个父容器，方便定位 -->
<div class="parent">
  <div class="D1"> </div>
  <div class="D2"> </div>
  <div class="D3"> </div>
  <div class="D4"> </div>
</div>

.parent {
  position: relative; /* 让子元素相对于这个容器定位 */
  width: 200px; /* 给父容器设宽高，避免塌缩 */
  height: 200px;
}
.D1,.D2,.D3,.D4{
  border:1px solid red;
  width: 100px;
  height: 100px;
  position: absolute; /* 关键属性，脱离文档流 */
}

方法2：使用Grid布局 #

如果不想用定位，也可以用Grid布局，把所有div放在同一个网格单元格里，这样它们就会重叠：

<div class="grid-container">
  <div class="D1"> </div>
  <div class="D2"> </div>
  <div class="D3"> </div>
  <div class="D4"> </div>
</div>

.grid-container {
  display: grid;
  width: 200px;
  height: 200px;
}
.D1,.D2,.D3,.D4{
  border:1px solid red;
  width: 100px;
  height: 100px;
  grid-row: 1 / 2; /* 都放在第一行 */
  grid-column: 1 / 2; /* 都放在第一列 */
}

这样修改后，你的div就会重叠在一起啦！

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