Html 在两个div的中间叠加DIV和DOX-X27；我没有固定的高度

我想在两个

上叠加一个

，并将其布局在这两个

之间

所以答案非常接近我想要实现的，但是答案并不实用，因为它明确地设置了底层和重叠的

s的高度。我想要一个解决方案，其中这些高度不是设定的，而是根据实际情况得出的

---

这（我使用的是Bootstrap4.5.0）是我迄今为止尝试过的。这相当接近，但是手动设置了

.second

的边距顶部，导致.second div的上边缘不接触.first div的下边缘。

如果将

.overlay

包装在div中并设置

位置：相对

然后，在叠加上：
位置：绝对；转化：translateY（-50%）
，它将相对于底部div的顶部进行定位，这样，无论
中有多少文本。首先
，或者屏幕大小如何，它们的位置都将保持不变


。首先{
背景颜色：浅绿色；
垫底：4em；
z指数：0；
}
.第二{
背景色：rgba（124、150、80、0.9）；
垫顶：4em；
}
.覆盖包装{
位置：相对位置；
}
.覆盖{
位置：绝对位置；
填充：1em；
背景色：rgba（0,0,0,0.5）；
颜色：白色；
边际：0.5em 0；
转化：translateY（-50%）；
}

这里有一些文本内容。因为内容不是固定的，所以我不想设置固定的高度。这里有一些文本内容。因为内容不是固定的，所以我不想设置固定的高度。这里有一些文本内容。由于内容不固定,，
我不想设定一个固定的高度。
这里是重叠div，它应该位于第一个div和第二个div之间并重叠。同样，此div的高度没有明确设置。
这里有一些文本内容。因为内容不是固定的，所以我不想设置固定的高度。
如果.div1和.div2的背景是纯彩色的，您可以选择如下内容：


.wrapper{
溢出：隐藏；
}
.1分部{
背景#F19063；
}
.第2分部{
背景：#A44691；
}
.第3分部{
位置：相对位置；
背景#70BB86；
宽度：100%；
最大宽度：300px；
}
.第三组：之前{
内容：''；
背景#F19063；
位置：绝对位置；
左：100%；
排名：0；
身高：50%；
宽度：100vw；
}
.第三组：之后{
内容：''；
背景：#A44691；
位置：绝对位置；
左：100%；
底部：0；
身高：50%；
宽度：100vw；
}

洛雷姆
洛雷姆
洛雷姆

洛雷姆
洛雷姆

洛雷姆
洛雷姆
洛雷姆