Свойство position в CSS

В предыдущем уроке была свёрстана веб-страница, блоки на которой были размещены в нормальном потоке, то есть один под другим. Блоки в html-документе, по умолчанию, всегда расставляются в нормальном потоке! Напомним, что внешний вид получившейся страницы таков. Заметим, что на ней отсутствует боковая колонка, которая имеется почти в каждом современном сайте, а может быть и не одна. Чтобы создать такую колонку, а точнее сказать, разместить блоки на странице как захочется, необходимо воспользоваться свойством position. Это свойство может иметь 4 значения:

  1. static - позиционирование блока в нормальном потоке. Является значением по умолчанию, поэтому можно не указывать;
  2. relative - относительное позиционирование;
  3. absolute - абсолютное позиционирование;
  4. fixed - фиксированное позиционирование блока.

Относительное позиционирование блоков

С помощью относительного позиционирования блок смещают относительно его местоположения в нормальном потоке. Чтобы блок разместить таким образом (относительно нормального потока) используется свойство position:relative. Пусть у нас есть 3 блока, расположенных в нормальном потоке:

Блок №1

Блок №2

Блок №3

Выглядят они так:

Блок №1
Блок №2
Блок №3

Теперь поработаем со средним блоком, однако перед этим немного информации. Смещение блока при относительном позиционировании задаётся при помощи следующих четырёх свойств:

  1. left - смещение левого края блока относительно левого края контейнера, в котором этот блок расположен;
  2. right - смещение правого края блока относительно правого края контейнера, в котором этот блок расположен;
  3. top - смещение верхнего края блока относительно верхнего края контейнера, в котором этот блок расположен;
  4. bottom - смещение нижнего края блока относительно нижнего края контейнера, в котором этот блок расположен;

Задаём среднему блоку смещение, относительно контейнера.

Блок №1

Блок №2

Блок №3

И вот что мы получаем:

Блок №1
Блок №2
Блок №3

Абсолютное позиционирование блоков

Абсолютное позиционирование применяется в тех случаях, когда заранее известны размеры блоков. Что ж, сверстаем страницу:


 
  Пример абсолютного позиционирования
  
 
 
  


  
  
Это блок с контентом (основным содержимым страницы). На этом месте должна располагаться статья или список ссылок на что-нибудь. Может быть также страница с блоком новостей.

  
  
 

Теперь таблица стилей:

body{
margin:0px;
}
#header{
background:#ff6633;
width:800px;
height:100px;
}
#topmenu{
text-align:center;
background-color:#ffcc66;
width:800px;
height:30px;
}
#topmenu a{
color:blue;
text-decoration:none;
}
#topmenu a:hover{
color:blue;
text-decoration:underline;
}
#content{
background-color:#ffccff;
position:absolute;
left:150px;
top:130px;
width:650px;
height:400px;
}
#sidebar{
background-color:#ff9966;
width:150px;
height:400px;
}
#sidebar a{
display:block;
padding-bottom:3px;
color:blue;
text-decoration:none;
}
#sidebar a:hover{
color:blue;
text-decoration:underline;
}
#footer{
background-color:#ffff33;
width:800px;
height:50px;
}

В этой таблице стилей первым идёт элемент body. Он необходим, для того, чтобы убрать поля в html-документе, так как в каждом браузере размер полей может быть своим. Блоки header, topmenu, sidebar и footer расположены на странице в нормальном потоке, то есть друг под другом. С блоком content ситуация другая. К нему было применено абсолютное позиционирование.

При абсолютном позиционировании в таблице стилей к блоку нужно приписать свойство position со значением absolute и разместить блок, сдвинув его в определённых направлениях на некоторое количество единиц измерения. Сдвигается блок в четырёх направлениях:

  1. left - смещение левого края блока относительно левого края контейнера, в котором этот блок расположен;
  2. right - смещение правого края блока относительно правого края контейнера, в котором этот блок расположен;
  3. top - смещение верхнего края блока относительно верхнего края контейнера, в котором этот блок расположен;
  4. bottom - смещение нижнего края блока относительно нижнего края контейнера, в котором этот блок расположен;

Блок с идентификатором content необходимо было разместить так, чтобы он был справа от боковой колонки с навигацией. Это мы и сделали, применив к нему относительное позиционирование. Заметим, длина боковой колонки (sidebar) - 150 пикселей, а высота заголовка (header) и верхнего меню с навигацией (topmenu) в сумме равна 130 пикселей. Именно на эти две величины был смещён блок с идентификатором content. Также, в самом html-документе блок с идентификатором content расположен раньше, чем sidebar, а фактически разместился справа, то есть за ним. При абсолютном позиционировании неважно, какой блок на странице размещён раньше, находиться он будет там, где указано в таблице стилей! Ну и ссылки в блоке sidebar сделали блочными элементами при помощи свойства display и задали нижний отступ для них, чтобы смотрелись красивее.

А то, что получилось в конечном итоге смотри здесь.

Фиксированное позиционирование блоков

Фиксированные блоки не прокручиваются вместе с веб-страницей. Чтобы сделать блок фиксированным нужно свойству position задать значение fixed. Рассмотрим пример:


 
  Пример фиксированного блока.
  
 
 
  

Фиксированный блок

  
Нефиксированный блок

 

Теперь таблица стилей:

#fixed {
position:fixed;
left:10px;
top:10px;
width:200px;
height:150px;
border-style:solid;
border-color:red;
border-width:1px;
text-align:center;
}
#nofixed {
position:absolute;
left:300px;
top:150px;
width:150px;
height:150px;
border-style:solid;
border-color:green;
border-width:1px;
text-align:center;
}

Смотрим, что получилось. Сделайте окно браузера маленьким, чтобы была видна полоса прокрутки и покрутите её вверх-вниз. Можно увидеть, что фиксированный блок остаётся на месте, а вот блок, положение которого задано при помощи абсолютного позиционирования двигается вместе с полосой прокрутки.

2012 год.


<<Предыдущая | В раздел | Следующая>>