为何我的所有div元素相互重叠？临时flex解决方案存在代码隐患的原因解析

你遇到的核心问题其实是绝对定位导致元素脱离正常文档流，加上父容器没有正确的高度支撑，才会出现反复重叠的情况，咱们一步步理清楚：

问题根源分析 #

1. 绝对定位让父容器"丢失"高度 #

你的img和.grid_box都设置了position: absolute，这个属性会让元素完全脱离正常的文档流——简单说就是，父容器.main_box根本感知不到这两个元素的存在，所以每个.main_box的高度都是0。这就导致所有.main_box都挤在页面顶部，自然互相重叠。

2. min-height:150vh只是临时"撑开"，不是根本解决 #

你给.wrapper设置min-height:150vh配合flex-direction: column和justify-content: space-between，本质是强制给容器一个固定的最小高度，然后把4个高度为0的.main_box分散在这个高度里，看起来不重叠了。但这是靠"硬撑"出来的布局，一旦你添加padding，flex容器的可用空间会被padding挤压，或者后续内容高度超过150vh，布局立刻就会崩溃。

3. Padding添加后的冲突 #

当你给.wrapper加padding时，flex容器的实际可用高度变成了150vh - padding值，而.main_box本身还是没有高度，space-between的空间分配逻辑被打乱，原本分散的元素又会挤在一起，重叠问题复发。

解决方案：让父容器获得真实高度 #

咱们需要让.main_box能感知到内部元素的高度，同时保持你想要的居中布局，这里有两种常用方案：

方案1：替换绝对定位，用文档流内的居中方式 #

把img改成背景图，.grid_box用flex居中，这样.main_box会自动拥有内部元素的高度：

修改后的CSS：

.wrapper { 
  display: flex; 
  flex-direction: column; 
  gap: 2em; /* 用gap控制.main_box之间的间距，替代space-between */
  padding: 2em; /* 现在加padding不会有问题了 */
}
.main_box {
  position: relative; /* 作为背景图的容器 */
  min-height: 500px; /* 和之前img的max-height保持一致 */
  display: flex;
  justify-content: center;
  align-items: center;
}
.image_box {
  position: absolute;
  z-index: -1;
  width: 100%;
  height: 100%;
  object-fit: cover; /* 保持图片比例，覆盖容器 */
}
.grid_box {
  max-width: 600px;
  background: white;
  z-index: 1;
  padding: 2em;
}
.box { 
  display: grid; 
  grid-template-columns: 100px 1fr; 
}
svg { grid-column: 1; grid-row: 1; }
.box_text { grid-column: 2; grid-row: 1; }

方案2：保留绝对定位，但给父容器设置高度支撑 #

如果你一定要用绝对定位，给.main_box设置position: relative和min-height，让它能容纳内部元素：

.wrapper { 
  display: flex; 
  flex-direction: column; 
  gap: 2em;
  padding: 2em;
}
.main_box {
  position: relative;
  min-height: 500px; /* 匹配img的高度 */
}
img { 
  z-index: -1; 
  max-height: 500px; 
  width: 100%;
  position: absolute; 
  left: 50%; 
  transform: translate(-50%, 0); 
}
.grid_box { 
  max-width: 600px; 
  background: white; 
  z-index: 1; 
  position: absolute; 
  left: 50%; 
  top: 50%; /* 垂直居中 */
  transform: translate(-50%, -50%); 
  padding: 2em; 
}
/* 其他样式保持不变 */

这两种方案都能让.main_box拥有真实的高度，从而避免重叠，后续添加padding或者扩展内容也不会出现不稳定的情况。

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