HTML\CSS → Свойство position: absolute и relative

Свойство position определяет порядок, в соответствии с которым элемент отображается на веб-странице. По умолчанию элементы отображаются последовательно один за другим в том порядке, в котором они определены в документе (static).

Блочные элементы (p, div, table, blockquote и др.) занимают 100% ширины родительского элемента. Поэтому последовательные блочные элементы отображаются один под другим.

Инлайновые элементы (em, strong, span, q, abbr и т.п.) занимают ширину которая соответствует ширине данных внутри него. Поэтому инлайновый элементы отображаются рядом друг с другом.

Свойство position вместе с top, right, bottom и left свойствами может отображать элемент с нарушением обычного порядка.

static

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

relative

Позиция элемента смещается относительно его исходного положения вверх, вниз, вправо или влево (зависит от того, какое свойство применено: top, right, bottom или left).

absolute

Позиция элемента смещается относительно родительского элемента вверх, вниз, вправо или влево (зависит от того, какое свойство применено: top, right, bottom или left), а так же нарушается порядок отображения элементов. Элементы, следующие за ним располагаются так, словно его нет на странице. Также на положение влияет значение свойства position родительского элемента.

Так, если у родителя значение position установлено как  static или родителя нет, то отсчет координат ведется от края окна браузера.

Если у родителя значение position задано как relative, fixedили absolute, то отсчет координат ведется от края родительского элемента.

fixed

Позиция эелемента зафиксирована относительно границы окна браузера и поэтому элемент не прокручивается вместе с остальным контентом страницы. Позиция элемента смещается вверх, вниз, вправо или влево (зависит от того, какое свойство применено: top, right, bottom или left)

inherit

Заимствует значение у родительского элемента.

Пример: прижать div к правому верхнему углу родительского:

<style type="text/css">
        .parent { position: relative; }
        .child { position: absolute; right: 10px; top: 10px; }
</style>
<div class="parent">
        <div class="child">
            Some text
        </div>
</div>