在图片

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

儿童内部的位置包裹

＆＃13;

＆＃13;

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;
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

Answer 2

您可以使用Transform: Translate()在父<div>内移动它。我自己用<div>

中的表和输入字段做了这个