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

Question

我有几个<section>带有背景图像的堆叠 HTML。在每个中<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;
}