Html 如何将文本保存在图像容器下方，使其不会'；不要掩饰？

我的文本一直在图像容器后面。如何将文本保持在图像下方？文本不是图像的标题。我在下面粘贴了一些代码，项目也在这里。感谢您的帮助

.image-container {
  justify-content: center;
  display: flex;
  max-width: 100%;
  height: auto;
  margin: 10px 10px 10px 10px;
}
.image-container img {
  max-width: 30%;
  height: auto;
  position: absolute;
  animation-name: multiple-image-crossfade;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
  animation-duration: 6s;

.image容器{
证明内容：中心；
显示器：flex；
高度：400px；
}
.图像容器img{
位置：绝对位置；
动画名称：多图像交叉淡入淡出；
动画计时功能：轻松进出；
动画迭代次数：无限；
动画持续时间：6s；
最大高度：400px；
}

为什么要使用position:absolute？尝试删除它。@t如果我删除了“位置：绝对”，则文本会停留在我想要的位置下方，但图像转换无法正常工作。好的，我检查了您的回复。我明白你想做什么了。现在，我的解决方案是不要移除位置：abosolute。相反，增加高度：150px；在那条线下。请记住，当您使用绝对位置时，元素（在本例中为img）会溢出容器，因此，请确保将其设置为与容器相同的高度。我刚刚尝试过，但它仍然不会将文本保留在图像容器下方。我想我需要尝试一个不同的过渡，这样我就可以改变绝对位置。