Html 如何在容器中的图像上覆盖文本--并将文本保留在容器中

我正在按照百亿个位置中给出的解决方案，使用

相对

和

绝对

定位在图像上叠加文本。问题是带有

位置：绝对
的文本从其容器中弹出，并到达最大
顶部
，
右侧
，等等

我很乐意使用背景图像，但是我需要一些技巧使容器与图像的大小相匹配，我不知道如何使其流动

这似乎是一个相当简单的问题，人们总是在寻找解决方案。另外，在不透明图像上叠加文本，并且需要使用
：after
。希望在这些情况下有直截了当的选择


.container{
利润率：0.10%；
}
.集装箱img{
位置：相对位置；
宽度：100%；
}
#第1部分.文本{
位置：绝对位置；
底部：0；
右：0；
}
#第2部分.文本{
位置：绝对位置；
排名：0；
左：0；
}

头像
此文本应位于顶部图像的右下角

这里有一堆杂文

下部图像
这应该在下图的左上角

我不太确定是否有足够的信息。我假设您的容器宽800px，高200px（我使用了最小高度，以防您的容器增加其高度）。如果您可以提供更具体的信息，这将是非常好的（有更复杂的方法使用对象位置属性（etc））使其更“智能化”

您需要在
.container
上设置
position:relative
，这是
.text
的正确容器。请注意，
img
是
.text
的同级，而不是其容器


.container{
利润率：0.10%；
位置：相对位置；
}
.集装箱img{
宽度：100%；
}
#第1部分.文本{
位置：绝对位置；
底部：0；
右：0；
}
#第2部分.文本{
位置：绝对位置；
排名：0；
左：0；
}

头像
此文本应位于顶部图像的右下角

这里有一堆杂文

下部图像
这应该在下图的左上角

感谢您的精彩解释！
img {
  max-width: 100%;
  display: block;
  height: auto;
}

.container {
  position: relative;
  min-height: 200px;
  width: 800px;
  margin: 0 10%;
}

.container img {
  z-index: 500;
  top: 0;
  left: 0;
}

.container .text {
  position: absolute;
  z-index: 1000;
}

#div1 .text {
  bottom: 0;
  right: 0;
}

#div2 .text {
  position: absolute;
  top: 0;
  left: 0;
}