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

Особенности применения свойств left, rigth, top и bottom для элементов, которые имеют абсолютное позиционирование.

В этой заметке давайте подробнее рассмотрим, как работают свойства left, rigth, top и bottom при абсолютном позиционировании элемента.

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

03-05-2014 6-04-19

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

Особенность 1.

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

Этот пример мы с вами уже разбирали, приведу здесь его еще раз:

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

Особенность 2.

Свойства left и top имеют более высокий приоритет по сравнению с right и bottom. Т.е. при одновременном применении элементу свойства left и right значение свойства left будет применено к элементу, а right нет.

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

Несмотря на то, что свойству right был присвоен отступ в размере 10000 пикселей и элемент уже должен был скрыться за областью просмотра браузера, тем не менее, к элементу div  было применено только свойство left.

Аналогичная ситуация будет со свойствами bottom и top.

Особенность 3.

Каждому из свойств left, right, bottom и top можно задавать отрицательные значения. В этом случае элемент будет смещаться в обратном направлении от своего назначения и может даже уйти за пределы видимости в экране. Это один из способов спрятать элемент, который не нужно показывать на веб-странице.

Давайте попробуем задать отрицательный отступ для свойства left

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

Та же самая ситуация будет со свойством top.

Особенность 4.

Если одновременно задать элементу свойства left и right и при этом явно не указывать ширину для блока свойством width, мы будем формировать ширину для абсолютно позиционированного блока.

Например, чтобы растянуть блок на 100% ширины экрана добавим одновременно свойтсво left:0px; right:0px;

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

Аналогичная ситуация будет и с высотой элемента, когда вы будете применять это для свойств top, bottom и height.

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

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

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