使用CSS将HTML元素相对于父元素的底部定位？

Question

我有几个带有背景图片的堆叠HTML <section>。在每个<section>内，我都有一个内容包含的内容。

JSFiddle：http://jsfiddle.net/victorhooi/zRFzb/1/

JSFiddle全屏输出：http://jsfiddle.net/victorhooi/zRFzb/1/embedded/result/

理想情况下，我希望主标题（#proclaim）和面板（.contentbox）与每个背景图像底部的设置像素距离。

然而，我似乎无法实现这一点。

我确实使用内部position: relative;技巧尝试了position: absolute;，并结合了bottom的值，但这似乎根本不起作用 - 它实际上已将所有框发送到页面顶部。

目前，我正在使用一种混合定位来试图让一切都适合。

但是，当您更改浏览器窗口大小或分辨率时，面板和文本会随处移动。

有没有办法将主标题和面板粘贴到各自背景图像底部的一定距离？

Answer 1

工作得很好

section {
  position: relative;
}

.contentbox, #proclaim {
  bottom: 10px; // your value
  position: absolute;
}