在原始位置留下空间的文本文本

Question

我在div中放置了一个图像后跟文本，并使用相对定位将文本放在图像上，如下所示：

<div><img><p></p></div> 
p {position: relative; top: -250px;}

问题是，图像下面有一个空间，文本原本应该去，我无法弄清楚如何摆脱它。使用填充和边距似乎不起作用。我正在使用flexbox制作响应式网站。如果可能的话，我还想使用div填充来定位文本。欢迎提出任何建议。

谢谢！

Answer 1

您必须使用position: absolute来定位图片标题：http://jsfiddle.net/otc4L83b/。

HTML：

<div class = "imageWrapper">
    <img src = "http://placehold.it/300x200" />
    <p>Image Title</p>
</div>

CSS：

* {
    margin: 0;
    padding: 0;
}

body {
    padding: 10px;
}

.imageWrapper {
    position: relative;
    display: table;
}

.imageWrapper > p {
    position: absolute;
    bottom: 5px;
    right: 5px;
    font: 18px/2 Sans-Serif;
    color: #fff;
}