使用 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;技巧的position: relative;，并结合了bottom的值，但这似乎根本不起作用 - 它实际上将所有框发送到页面顶部。

目前，我正在使用一种混合的定位来尝试让所有东西都适合。

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

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

Answer 1

工作正常

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