Абсолютное позиционирование элемента внутри родительского

В статье "Абсолютное позиционирование элементов (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.