Менять свойство position оправдано, если стоит задача в одном контейнере визуально наложить друг на друга дочерние блоки, которые в html не вложены друг в друга - по тексту иду один за другим.
Например, у вас есть контейнер div.photo__container с img и блоком описания div.photo__descr:
<div class="photo__container">
<img src="photo.jpg"/>
<div class="photo__descr">
<p>Описание для фото</p>
</div>
</div>
Если стили оставить как есть, то описание отобразится под изображением.
Чтобы наложить описание на фото, нужно изменить позиционирование блока описания.
Если мы тупо пропишем position: absolute для блока описания photo__descr, то этот блок убежит черт знает куда (точнее, спозиционируется относительно body, или ближайшего родителя, у которого будет position: relative).
div.photo__descr
{
position: absolute;
}
Для этого нужно ограничить абсолютное позиционирование данного блока родительским блоком:
div.photo__container
{
position: relative;
}
Далее, хотелось бы, чтобы блок приклеился к низу контейнера. Поскольку у нас блок в абсолютном позиционировании, то могут работать свойства top, right, bottom, left. Нужен bottom:
div.photo__descr
{
position: absolute;
bottom: 0;
}
Еще есть желание ограничить макс. высоту блока описания, можно воспользоваться процентами, причем они будут высчитываться от родительского блока position: relative:
div.photo__descr
{
position: absolute;
bottom: 0;
max-height: 30%;
overflow-y: auto; /* можно еще добавить возможность прокручивать содержимое при вертикальном переполнении */
}
Увы, чтобы работали процентные величины относительно родителя, нужно чтобы у родителя были заданы конкретные значения ширины и(или) высоты:
div.photo__container
{
position: relative;
height: 600px;
}