使用CSS将HTML元素相对于父元素的底部定位？(Position HTML element relative to bottom of parent element using CSS?)

 我有几个堆叠的HTML <section> s与背景图像。 在每个<section> ，我有一个包含内容的面板。 
 
 JSFiddle： http ： //jsfiddle.net/victorhooi/zRFzb/1/ 
 
 JSFiddle全屏输出： http ： //jsfiddle.net/victorhooi/zRFzb/1/embedded/result/ 
 
 理想情况下，我希望主标题（ #proclaim ）和面板（ .contentbox ）是距每个背景图像底部的设置像素距离。 
 
 但是，我似乎无法实现这一目标。 
 
 我确实尝试过这个position: relative; 内在的position: absolute; 技巧，结合bottom的值，似乎根本不起作用 - 它实际上将所有框发送到页面顶部。 
 
 目前，我正在使用一种混合定位试图让一切都适合。 
 
 但是，当您更改浏览器窗口大小或分辨率时，面板和文本将随处移动。 
 
 有没有办法将主标题和面板粘贴到各自背景图像底部的一定距离？ 

I have several stacked HTML <section>s with background images. Within each <section>, I have a panel with content inside.
 
JSFiddle: http://jsfiddle.net/victorhooi/zRFzb/1/
 
JSFiddle Full-screen output: http://jsfiddle.net/victorhooi/zRFzb/1/embedded/result/
 
Ideally, I would like the main title (#proclaim) and the panels (.contentbox) to be a set pixel distance from the bottom of each background image.
 
However, I can't seem to achieve this.
 
I did try the position: relative; with an inner position: absolute; trick, combined with a value for bottom and that didn't seem to work at all - it actually sent all the boxes to the top of the page.
 
Currently, I'm using a mish-mash of positioning to try to get everything to fit.
 
However, when you change the browser window size or the resolution, the panels and text move everywhere.
 
Is there a way to affix the main heading, and the panels to a set distance from the bottom of their respective background images?

原文：https://stackoverflow.com/questions/19117187