Свойство 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>