html - 设置图片下方的内容

Question

无论如何我可以将我的 div 内容放在图像下方。我不想给包装类填充填充，因为没有人知道图像有多大，所以我需要一个解决方案，其中文本位于图像下方如html结构中所述。

.parent {
  width: 500px;
  background-color: red;
  margin: 0 auto;
  position: static;
}

.wrap {}

.child {
  background-color: yellow;
  position: absolute;
  left: 0;
  right: 0;
  height: 100px;
  top: 30px
}

div {
  height: 400px;
}

body {
  background-color: blue;
}

<div class="parent">
  <div class="child"><img src="https://images.mapsofworld.com/around-the-world/Chinese-economy-faces-tough-times.jpg" /></div>
  <div class="wrap">stuff</div>
</div>

Answer 1

位置包裹在 child 里面

html, body { padding: 0; margin:0; }
.parent {
  width: 500px;
  background-color: red;
  margin: 0 auto;
  position: static;
}

.wrap {}

.child {
  background-color: yellow;
  position: absolute;
  left: 0;
  right: 0;
  height: 100px;
  top: 30px
}

div {
  height: 400px;
}

body {
  background-color: blue;
}

<div class="parent">
  <div class="child"><img src="https://images.mapsofworld.com/around-the-world/Chinese-economy-faces-tough-times.jpg" />
    <div class="wrap">stuff</div>
  </div>
</div>