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