Html 在图像后面写下文字，保持一切响应

这就是我试图通过我的网站上的HTML/CSS实现的目标：

---

我想在笔记本电脑屏幕上实现的图像后面添加一个div文本，但在调整屏幕大小时，我很难使其与图像右侧的文本重叠。如何保持此结构的响应性？

为什么不在移动设备上将文本拆分成新行，并将其放在图像下方？

使用绝对位置和z索引可以做很多事情

在下面的示例中，我使用了绝对位置和百分比来保持完整的响应性，并使用z-index来重叠底部div

单击完整页面以测试它。希望这有帮助

.background{
位置：相对位置；
宽度：100%；
高度：400px；
背景：黄色；
}
.形象{
位置：绝对位置；
高度：350px；
宽度：30%；
背景：蓝色；
左：15%；
z指数：1；
}
.imagetext{
位置：绝对位置；
左：50%；
}
.文本{
位置：绝对位置；
宽度：80%；
高度：100px；
左：10%；
底部：0；
背景：灰色；
}

Lorem ipsum dolor sit amet
Lorem ipsum dolor sit amet

为什么您的答案是一个问题？