Просмотров: 1 910

Абсолютное позиционирование элементов на веб-странице. Свойство CSS position absolute.

Продолжаем рассматривать возможные значения свойства CSS position. На этот раз давайте рассмотрим абсолютное позиционирование элементов и свойство CSS:

position:absolute;

Вернемся к предыдущему примеру и посмотрим, как на этот раз будут вести себя элементы.

<div style="background:#ccc;">Блок 1</div>
<div style="background:#9cc; position:absolute;">Блок 2</div>
<div style="background:#c9c;">Блок 3</div>

Что в этом случае произошло с блоком div, к которому было добавлено свойство position:absolute?

1) Блок выпал из нормального потока, потерял свою высоту и элемент, который находился под ним, занял его место.

2) Блок div перестал занимать 100% ширины экрана монитора.

Ширина слоя при абсолютном позиционировании, если она не задана явно, становится равной ширине контента плюс значения полей, границ и отступов.

<div style="background:#ccc;">Блок 1</div>
<div style="background:#9cc; position:absolute; width:300px;">Блок 2</div>
<div style="background:#c9c;">Блок 3</div>

Для блочных элементов абсолютное позиционирование не оказывает влияние на высоту элемента.

Теперь давайте попытаемся спозиционировать этот блок в нужное место с помощью свойств CSS top и left.

<div style="background:#ccc;">Блок 1</div>
<div style="background:#9cc; position:absolute; top:5px; left:10px;">Блок 2</div>
<div style="background:#c9c;">Блок 3</div>

Как видно из примера, блок смещается относительно окна документа.

Теперь давайте рассмотрим, что произойдет если абсолютное позиционирование применить к строчному элементу.

<span style="background:#ccc;">Строчный элемент 1</span>
<span style="background:#9cc; position:absolute; top:5px;">Строчный элемент 2</span>
<span style="background:#c9c;">Строчный элемент 3</span>

Строчный элемент выпадает из потока, теряет свою ширину, которую он занимал в пределах строки и элемент, который находился после него, перемещается на его место.

И еще, абсолютно спозиционированному строчному элементу можно применять свойство height и оно будет работать.

Строчный элемент приобрел свойства блочных.

Это основные свойства, характеристики, которые приобретают элементы если применить к ним абсолютное позиционирование.

Этот материал входит в соостав курса «Базовые приемы верстки веб-страниц»

К списку всех материалов курса. Доступ можно получить в группе вконтакте, в разделе «Ссылки».