Свойство position в CSS



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

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

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

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

<div style="border-color:red; border-width:thin; border-style:solid; width:200px; height:50px;">Блок №1</div>
<div style="border-color:red; border-width:thin; border-style:solid; width:200px; height:50px;">Блок №2</div>
<div style="border-color:red; border-width:thin; border-style:solid; width:200px; height:50px;">Блок №3</div>

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

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

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

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

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

<div style="border-color:red; border-width:thin; border-style:solid; width:200px; height:50px;">Блок №1</div>
<div style="border-color:red; border-width:thin; border-style:solid; width:200px; height:50px; position:relative; left:30px; bottom:20px;">Блок №2</div>
<div style="border-color:red; border-width:thin; border-style:solid; width:200px; height:50px;">Блок №3</div>

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

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

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



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

<html>
 <head>
  <title>Пример абсолютного позиционирования</title>
  <link rel="stylesheet" type="text/css" href="style10.css">
 </head>
 <body>
  <div id="header">Это шапка сайта. Обычно здесь размещают баннер и ещё что-нибудь.</div>
  <div id="topmenu"><a href="#">Главная</a> | <a href="#">Новости</a> | <a href="#">О нас</a> | <a href="#">Контакты</a></div>
  <div id="content">Это блок с контентом (основным содержимым страницы). На этом месте должна располагаться статья или список ссылок на что-нибудь. Может быть также страница с блоком новостей.</div>
  <div id="sidebar"><a href="#">Статья 1</a> <a href="#">Статья 2</a> <a href="#">Статья 3</a> <a href="#">Статья 4</a> <a href="#">Статья 5</a> <a href="#">Статья 6</a> <a href="#">Статья 7</a></div>
  <div id="footer">Это подвал. Здесь пишут чаще всего: © Все права защищены и информацию о том, как можно связаться с администрацией ресурса.</div>
 </body>
</html>

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

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. Рассмотрим пример:

<html>
 <head>
  <title>Пример фиксированного блока.</title>
  <link rel="stylesheet" type="text/css" href="style11.css">
 </head>
 <body>
  <div id="fixed">Фиксированный блок</div>
  <div id="nofixed">Нефиксированный блок</div>
 </body>
</html>

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

#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 год.


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