html - 使用CSS将HTML元素相对于父元素的底部定位？

Question

我有几个<section>带有背景图像的堆叠 HTML。在每个<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;
}