如何将 div 放置在高度不断变化的图像下方？

Question

在我的新站点中，我将图像宽度设置为 100%，然后在其下方设置了一些文本。如何根据图片的高度改变文字的位置？

.pic {
  position: absolute;
  left: 0;
  width: 100%;
}

.pic img {
  position: absolute;
  width: 100%;
}

.text {
  position: relative;
  margin-top: 10px;
}

<div class="pic">
  <img src="#" />
</div>
<div class="text">
  <h3>Some Important Message</h3>
</div>

根据要求，这里是 fiddle https://jsfiddle.net/sLx3n2vz/

Answer 1

请试试这个：

删除所有你css并只添加

.pic{
    width:100%;
}
.pic img{
    width:100%;
}
.text{
    margin-top:10px;
}

DEMO

您定位 HTML 元素的方式有误。请更正。