Position HTML element relative to bottom of parent element using CSS?

Question

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?

Answer 1

works just fine

section {
  position: relative;
}

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