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

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

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

测试
.标题{
位置：绝对位置；
底部：0；
}

正如你在这里看到的：

这将使元素位于页面底部，而不是背景图像的底部。我对“bottom”属性的理解是，它可以相对于其父元素，但在本例中它不起作用

我遗漏了什么？或者其他方法来实现这一点？使用边距顶部不是一个选项，因为我正在创建一个流体布局，这将取决于屏幕比例，我不希望这样

---

我想要的是一种将元素放置在其父元素底部的方法。在本例中，我想将文本放置在一个以“background image”为样式的图像底部。

使用

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

测试

w3schools：

绝对位置元素相对于第一位置元素定位 具有非静态位置的父元素。如果没有 元素，则包含的块为

---

使用

位置：相对

到您的背景图像

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>

测试

w3schools：

绝对位置元素相对于第一位置元素定位 具有非静态位置的父元素。如果没有 元素，则包含的块为