Четверг, 10 Мая 2012 15:41

Верстка сайта. Урок 8. Позиционирование элементов position

Written by 
Оцени эту запись
(4 Голоса)

Рассмотрим css-свойство position. Это свойство может принимать значения absolute, relative, fixed, static. 

 

 

Absolute - позиционирование элемента относительно родительского таким образом, что он находится в определенном месте и не влияет на расположение других элементов, не влияет на поток. Его смещение относительно родительского элемента (если у него свойство position со значением relative, fixed или absolute) или окна браузера (если у него свойство position со значением static, по умолчанию) задается с помощью свойств left, right, top, bottom со значениями в px. Абсолютное позиционирование очень полезно для изменения стандартного следования элементов в потоке. Все элементы, идущие за ним в потоке, ведут себя так, будто этого элемента вообще нет.

Relative - относительное позиционирование. Такие элементы находятся в потоке и им также можно задавать смещения относительно родительского. При смещение элемента с относительным позиционированием, окружающие его элементы ведут себя так, как будто он не смещался.

Fixed - фиксированное позиционирование. Элемент находится на определенном месте страницы (заданном свойствами left, top, right и bottom) и не смещается при прокрутке окна браузера.

Static - находится в потоке и не реагирует на смещение.

 

Значение по умолчанию - static.

 

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

 

Примеры:

 

 

<div style="position: relative; width: 100px; height: 100px; background: red; float: left; margin-right: 10px;">
<div style="position: relative; width: 50px; height: 50px; background: green; top: 10px; left: 10px;">
position: relative;</div>
Lorem Ipsum is simply dummy text of the printing and typesetting industry.</div>
<div style="position: relative; width: 100px; height: 100px;  background: red; float: left; margin-right: 10px;">
<div style="position: absolute; width: 50px; height: 50px; background: green; top: 10px; left: 10px;">
position: absolute;</div>
Lorem Ipsum is simply dummy text of the printing and typesetting industry.</div>
<div style="position: relative; width: 100px; height: 100px; background: red; float: left; margin-right: 10px;">
<div style="position: fixed; width: 50px; height: 50px; background: green; top: 10px; left: 10px;">
position: fixed;</div>
Lorem Ipsum is simply dummy text of the printing and typesetting industry.</div>
<div style="position: relative; width: 100px; height: 100px; background: red; float: left; margin-right: 10px;">
<div style="position: static; width: 50px; height: 50px; background: green; top: 10px; left: 10px;">
position: static;</div>
Lorem Ipsum is simply dummy text of the printing and typesetting industry.s</div>

 

 

 

 

position: relative;
Lorem Ipsum is simply dummy text of the printing and typesetting industry.
position: absolute;
Lorem Ipsum is simply dummy text of the printing and typesetting industry.
position: fixed;
Lorem Ipsum is simply dummy text of the printing and typesetting industry.
position: static;
Lorem Ipsum is simply dummy text of the printing and typesetting industry.s
 

 

 

 

 

Красненькие блоки имеют одинаковые стили, а у зеленых заданы разные значения свойства position.

 

Как видим в первом случа текст идет после блока, при этом блок отступает на указанные 10px сверху и слева.

 

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

 

В третьем случае блок вообще убежал вверх, не обращая внимания на то, кто его родитель. Он только отступил от края экрана на те же 10px.

 

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

 

Где используется position: absolute

 

С помощью данного значения этого свойства можно делать необычный вывод элементов.

 

Первый пример:

 

 

 

 
 
 
 

 

 

 

 

<div style="position: relative">
<div style="position: absolute; width: 50px; height: 50px; top: 0px; left: 0px; background: red"></div>
<div style="position: absolute; width: 50px; height: 50px; top: 30px; left: 30px; background: blue"></div>
<div style="position: absolute; width: 50px; height: 50px; top: 60px; left: 60px; background: green"></div>
<div style="position: absolute; width: 50px; height: 50px; top: 90px; left: 90px; background: yellow"></div>
</div>
 
Можно также использовать свойство z-index. По умолчанию, порядок отображения элементов на странице зависит от их порядка в html-документе. Кто ниже в документе, тот будет отображаться ниже. Для спозиционированных элементов, которые налезуют друг на друга, отображение будет такое - кто в документе ниже, тот отображается сверху. В нашем примере синий блок налезает на красный, потому что прописан позже. Но это можно изменить задав z-index синему больше, чем красному:
 
 
 
 
 
 
 

 

 

<div style="position: relative; width: 150px; height :150px;">
<div style="position: absolute; width: 50px; height: 50px; top: 0px; left: 0px; background: red; z-index: 999;">
&nbsp;</div>
<div style="position: absolute; width: 50px; height: 50px; top: 30px; left: 30px; background: blue; z-index: 998;">
&nbsp;</div>
<div style="position: absolute; width: 50px; height: 50px; top: 60px; left: 60px; background: green">
&nbsp;</div>
<div style="position: absolute; width: 50px; height: 50px; top: 90px; left: 90px; background: yellow">
&nbsp;</div>
</div>
 
 
 
Обновление 15.01.2013
 
 
Обнаружила интересные свойства абсолютно спозиционированного элемента.
 
 
Во-первых, мы знаем, что если не задать блоку ширину, то ширины будет равна 100%. У абсолютно спозиционированного элемента ширина зависит от контента:
 
 
<div style="position: absolute; background: violet; padding: 10px;"><div style="width: 300px; height: 50px; background: blue; color: white;">Text</div></div>
 
 
Text
 
 
 
 
 
 
 
Как видим, ширина фиолетового блока равна ширине дочернего плюс padding, который мы ему добавили.
 
 
Во-вторых, абсолютно спозиционированный элемент с дочерними плавающими блоками имеет высоту этих блоков. Обычно, если у блока внутри все дочерние плавающие (float) и нет элемента, которые этот float убирает, то высота его будет равна 0. 
 
 
 
<div style="position: absolute; background: violet; padding: 10px;">
<div style="width: 200px; height: 50px; background: blue; color: white; float: left;">Text</div>
<div style="width: 200px; height: 70px; background: yellow; color: white; float: right;">Text</div>
</div>
 
 
Text
Text
 
 
 
 
 
 
 
 
 
В-третьих, не забывайте, что внешние отступы абсолютно спозиционированных элементов не прибавляются к значениям свойств left, right, top, bottom. То есть, применять положительный margin-left не имеет смысла в случае положительного left.
 
 

 

 

 

 

Additional Info

You have no rights to post comments

верстка | CSS | верстка сайтов | HTML | верстальщик | блочная верстка | JavaScript | css верстка | профессиональная верстка сайтов