Абсолютное позиционирование элемента внутри родительского
В статье "Абсолютное позиционирование элементов (HTML + CSS)" рассматривался аналогичный вопрос, но там говорилось о позиционировании относительно рабочей области браузера. Элементу можно задать положение и внутри родительского элемента, что бывает очень полезным.
Предлагаю рассмотреть следующую реализацию: блок фиксированного размера, внутри которого расположен блок, прижатый к нижнему краю:
#parent
{
position: relative;
background: lime;
width: 200px;
height: 200px;
}
#block
{
position: absolute;
background: blue;
bottom: 0;
left: 0;
right: 0;
height: 30px;
}
<div id="parent">
<div id="block">Hello, world</div>
</div>
Родительскому элементу задается CSS-стиль position со значением relative, это позволяет позиционировать дочерние элементы относительно родительского.
Внутри блок прижимается к нижнему краю при помощи CSS-стилей left, right, bottom.