如何实现div叠加布局？新增wrapper后重叠问题求解

嘿，我看你已经搞定了文本覆盖在图片上的需求，但新增的第二个wrapper居然和第一个重叠在一起了对吧？这问题其实出在绝对定位元素脱离文档流上——你给.wrapper__figure加了position:absolute后，它就不再占据父元素.wrapper的空间了，导致.wrapper的高度直接变成0，第二个wrapper自然就会往上跑和第一个重叠啦。

这里给你两个实用的修复方案，选你觉得顺手的就行：

方案1：利用padding-top比例法固定Wrapper高度 #

你的图片尺寸是1920x800，宽高比是800/1920 ≈ 41.666%，我们可以利用这个比例给.wrapper设置padding-top，让它自动适配图片的高度：

body { margin: 0; padding: 0; }
.wrapper { 
  position: relative; 
  width: 100%;
  padding-top: 41.666%; /* 匹配图片宽高比，自动生成对应高度 */
}
.wrapper__figure { 
  position: absolute; 
  top: 0; left: 0;
  width: 100%; height: 100%;
  margin: 0; 
}
.wrapper__content { 
  display: flex; 
  position: absolute; 
  top: 0; left: 0; right: 0; bottom: 0; 
  z-index: 1;
  padding: 2rem; /* 可选：给文本加内边距，避免贴边 */
}
img { 
  width: 100%; 
  height: 100%; 
  object-fit: cover; /* 把行内样式移到CSS里，更规范 */
}
.inner { 
  width: 100%;
  position: relative; 
}
.columns {
  display: flex;
  gap: 2rem; /* 可选：给列之间添加间距，提升美观度 */
}
.column1-3 {
  flex: 1;
}

修改后每个.wrapper都会根据图片比例自动撑开高度，绝对定位的图片和文本会填满整个wrapper，第二个wrapper就会乖乖排在第一个下面啦。

方案2：用Grid布局实现重叠（更现代的写法） #

如果你想避开绝对定位的坑，可以用CSS Grid来实现元素重叠，同时让wrapper自动适应图片高度：

body { margin: 0; padding: 0; }
.wrapper { 
  display: grid;
}
.wrapper__figure, .wrapper__content {
  grid-area: 1 / 1 / 2 / 2; /* 让两个元素占据同一个网格单元格 */
}
.wrapper__figure { margin: 0; }
.wrapper__content { 
  z-index: 1;
  display: flex;
  padding: 2rem;
  align-items: center; /* 可选：让文本垂直居中 */
}
img { 
  width: 100%; 
  height: auto;
  display: block; /* 去掉图片底部的默认空白 */
}
.inner { width: 100%; }
.columns {
  display: flex;
  gap: 2rem;
}
.column1-3 { flex: 1; }

对应的HTML不需要做任何修改，这样每个wrapper会自动根据图片高度撑开，文本完美覆盖在图片上，多个wrapper也会正常上下排列，非常省心～

内容的提问来源于stack exchange，提问作者Remco de Baas