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