Как известно, существует несколько типов позиционирования блочных элементов. Это нормальное позиционирование, относительное, абсолютное и обтекание (float). В данном случае рассмотрим относительное и абсолютное позиционированных блоков, т.к в определенных ситуациях их совместное использование может быть очень удобным.

При абсолютном позиционировании элемент как бы вырывается из нормального потока и появляется в определенном месте страницы, согласно заданным расстояниям относительно родительского блока. Например,

div#block {
position: absolute;
top: 20px;
left: 30px;
}

Означает, что элемент <div id=”block”> появится на расстоянии 20px сверху и 30px слева относительно родительского блока вне зависимости от общего потока элементов. То есть, блоки расположенные с абсолютным позиционированием располагаются как бы на новом слое, независимом от основного слоя, на котором располагаются остальные элементы. 

Относительное позиционирование не предполагает смещение элемента из общего потока, но позволяет сдвинуть его относительно других элементов, используя свойства top, bottom, left, right.  

Сами по себе эти способы позиционирования могут использоваться по отдельности, но наиболее интересные и удобные результаты можно получить комбинируя их  в различных элементах.

Например, можно создать всплывающую подсказку для гиперссылки.

Допустим, имеется некий текст, содержащий гиперссылки.

<p>
 Nemo enim ipsam <a href="#" class="tooltip">voluptatem <span>spernatur aut odit aut fugit</span></a>, quia voluptas sit, aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos, <a class="tooltip" href="#">qui ratione voluptatem<span>id est laborum et dolorum fuga</span></a> sequi nesciunt, neque porro quisquam est, qui dolorem ipsum, quia dolor sit, amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt, ut labore et dolore magnam aliquam quaerat voluptatem.
</p>

В данном случае роль всплывающей подсказки будет выполнять элемент <span> (текст, расположенный между открывающими и закрывающими тегами <span> и будет показываться при наведении на ссылку). Для того, чтобы это работало, нам потребуется следующий css-код: 

a.tooltip span {
     display: none;
     }
     
a.tooltip:hover {
    position: relative;
}

a.tooltip:hover span {
    display: block;
    position: absolute;
    top: -20px;
    left: 0;
    padding: 3px;
    background: #FFFFF0;
    border: 1px solid #cecece;
    font-size: 12px;
    text-decoration: none;
    color: #000;
}

Первоначально мы скрываем <span> внутри ссылки и назначаем ему отображение при наведении на ссылку. Т.к. мы позиционируем a:hover относительно, то это позволяет расположить <span> с абсолютными координатами.  В результате при наведении на ссылку мы получаем всплывающий текст. Посмотреть пример.

Удобно также использовать относительное позиционирование для элемента-контейнера , т.к. это позволяет размещать внутри него абсолютно позиционированные элементы, что весьма удобно при создании сетки страницы.