将文本定位在背景图像的底部

Question

我需要在背景图像的底部放置一个文本元素。

<div style="background-image: url('http://www.hdwallpapersinn.com/wp-content/uploads/2013/03/1325120512b60-45927-1.jpg'); height:100px">
    <p class="caption">Test</p>
</div>


.caption{
    position: absolute;
    bottom:0;
}

正如您在此处所见：http://jsfiddle.net/K98CR/

这会将元素放置在页面底部而不是背景图像的底部。我对“底部”属性的理解是它可以相对于它的父元素，但在这种情况下它不起作用。

我缺少什么？或任何其他方式来实现这一目标？使用margin-top不是一个选项，因为我正在创建一个流畅的布局，这取决于屏幕比例，我不希望这样。

我想要的是一种将元素放置在其父元素底部的方法。在这种情况下，我想将文本放在使用“background-image”设置样式的图像的底部。

Answer 1

将postion: relative;用于您的背景图片div即可解决问题。

<div style="background-image: url('http://www.hdwallpapersinn.com/wp-content/uploads/2013/03/1325120512b60-45927-1.jpg'); height:100px; position: relative;">
    <p class="caption">Test</p>
</div>

LIVE EXAMPLE

w3schools ：

  

绝对位置元素相对于第一个定位   具有静态位置的父元素。如果没有这样的话   找到元素，包含块是＆lt; html＆gt;