如何将信息放在使用translate / top移动的移动div /图像下？

Question

这是我的意思的一个例子：

img {
  width: 400px;
  height: 100px;
  top: -50px;
  position: relative;
}

<img src="http://www.flabber.nl/sites/default/files/archive/files/i-should-buy-a-boat.jpg">
<p>
  testing to see when it will work
</p>

文本应该在图像的正下方，但我仍然想要移动图像/ div。

我还想在没有top / translate的情况下移动文本，因为我将不得不移动所有文本/ div /图像。

Answer 1

请使用以下内容：

top:0px; 
margin-top:-50px;

这是jsfiddle： https://jsfiddle.net/1fu1y4nw/

Answer 2

默认情况下<p>标记有一个边距，您只需删除边距。

试试这个：

img {
  width: 400px;
  height: 100px;
  margin: 0;
}

p {
  margin: 0;
  padding: 0;
}