如何使用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:absolute; 与 bottom 值相结合的 position:relative; 技巧，但完全行不通 - 它实际上将所有框发送到页面顶部。

目前，我正在使用一些混杂的定位来尝试让一切都适合。

然而，当你改变浏览器窗口大小或分辨率时，面板和文本会随处移动。

是否有一种方法可以将主标题和面板固定在其各自背景图像的底部一定距离处？

- victorhooi

Answer 1

运行正常

section {
  position: relative;
}

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

- Anpher