Свойство position задает режим позиционирования элементов.
1. Статическое. Значением по умолчанию является positon:static — элементы отображаются последовательно один за другим в том порядке, в котором они определены в документе.
2. Относительное. Значение positon:relative — позиция элемента смещается относительно его исходного положения вверх, вниз, вправо или влево (свойствами top, right, bottom или left). Элемент остается в потоке документа и на самом деле никуда не смещается. Он остается в потоке ровно там же, где и был, а смещается визуальная копия блока (можно проверить увеличив его высоту или задав отступы).
3. Абсолютное. Значение position:absolute — элементы обладают следующими особенностями:
1. Выпадают из потока документа. Место, которое они занимали, становится как бы пустым и его занимают соседние элементы.
2. Остаются на том же месте, где были, если не заданы значения свойств top, left, right, bottom.
3. Ширина по умолчанию зависит от содержимого (а не растягивается на всю доступную ширину).
Если строчный элемент спозиционирован абсолютно, то он ведет себя точно так же, как и абсолютно спозиционированный блочный (можно задавать размеры).
Свойства left, top, right и bottom для «относительных» элементов задают смещение относительно исходной позиции, а для «абсолютных» элементов они задают расположение относительно некой системы координат (окно браузера по-умолчанию, или родителя).
Если родитель имеет position: relative а дочерний блокposition: absolute, то элемент будет позиционироваться относительно этого родителя.
<style type="text/css">
.footer { position: relative; padding-left: 50px; }
.logo { position: absolute; left: 10px; }
</style>
<div class="footer">
<div class="logo"><img src='..' alt='logo' /></div>
<div>text</div>
</div>
Если среди родителей несколько относительно позиционированных элементов, то “абсолютный” элемент будет позиционироваться относительно ближайшего из них.
Если «абсолютному» элементу не задавать свойства left, top и т.д., то он выпадет из потока, но останется на прежнем месте, и сместить его из этой точки отсчета можно с помощью свойстваmargin.
4. Фиксированное. Значение position:fixed — элементы обладают следующими особенностями:
- Фиксированный элемент выпадает из потока документа.
- Элемент привязывается к определенной точке в окне браузера и остается на ней всегда, даже при прокрутке страницы.
- Фиксированный элемент можно позиционировать с помощью свойств top, left, right, bottom, но точка отсчета всегда привязана к окну браузера.