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

Question

I have some stacked HTML <section>with background images. Inside each <section>, I have a panel with the contents inside.

JSFiddle: http://jsfiddle.net/victorhooi/zRFzb/1/

JSFiddle Fullscreen Output: http://jsfiddle.net/victorhooi/zRFzb/1/embedded/result/

Ideally, I would like the main name ( #proclaim) and panels ( .contentbox) to be the given pixel distance from the bottom of each background image.

However, I cannot achieve this.

I tried position: relative;with an internal trick position: absolute;in combination with a value for bottom, and this did not seem to work at all - it actually sent all the boxes at the top of the page.

I am currently using mish-mash positioning to try and get everything to fit.

However, when you resize your browser window or resolution, panels and text move around.

Is there a way to snap the main title and panels to a given 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;
}