Язык CSS
Относительное позиционирование.


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


Попробуем на практике. Откроем html-документ с тремя div-ами. Зададим в таблице стилей размеры и границы этих блоков:
#menu, #content, #news{
border:1px solid red;
width:250px;
height:50px}
Проверьте результат в браузере.


Результат в браузере:
Практика


Попробуем на практике.Теперь изменим положение блока контента, для этого добавим в страницу стилей правило:
div#content{
position:relative;
left:50px;
top:10px}
Проверьте результат в браузере.


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

Практически относительное позиционирование применяется достаточно редко.


Плавающие блоки


Эти блоки нельзя позиционировать с точностью до пиксела, как в предыдущих схемах, но именно эта схема позиционирования очень распространенна. Без плавающих блоков обходится редкий сайт, а уж сделать "резиновую" верстку сайта без них и вовсе невозможно. Такие блоки могут свободно перемещаться по странице, подобным образом ведут себя картинки в HTML, выровненные с помоьщью параметра align.


Плавающие блоки определяются свойством float, который определяет будет ли блок плавающим и в какую сторону он будет перемещаться.
Возможны три варианта значений:

  • left - блок прижимается к левому краю, остальные элементы обтекают его с правой стороны;

  • right - блок прижимается к правому краю, остальные элементы обтекают его с левой стороны;

  • none - блок не перемещается и позиционируется согласно свойству position.

Попробуем на практике. Сделаем html-страницу со следующими элементами: блоки меню и новостей оставим, а контент будет без div, просто текстом (цвета фона и текста контента «перейдут» к body).
Проверьте результат в браузере.


Сейчас наша страница в браузере выглядит так:
Практика


Попробуем на практике. Давайте сделаем блок меню плавающим и прижмем его к левому краю:
#menu{
float:left}
Проверьте результат в браузере.


Теперь наша страница в браузере выглядит так:
Плавающие блоки


Практическое задание:
  • прижмем блок новостей к правому краю и поставим его в html-документе вместе с меню перед контентом;

  • проверить, что будет, если у блоков будут одинаковые значения: прижать оба блока сначала к левому, потом к правому краю.

Проверьте результат в браузере.


Оба блока слева:
Оба блока слева


Оба блока справа:
Оба блока справа


А что делать, если мы хотим, чтобы блоки были прижаты к правому краю, но располагались бы один под другим.
Для этого существует свойство clear, которое определяет, какие стороны плавающего блока не могут соседствовать с другими плавающими блоками.
У этого свойства может быть задано одно из четырех значений:

  • left - блок должен располагаться ниже всех левосторонних блоков;

  • right - блок должен располагаться ниже всех правосторонних блоков;

  • both - блок должен располагаться ниже всех плавающих блоков;

  • none - никаких ограничений нет, это значение по умолчанию.

Попробуем на практике. Зададим это свойство для блока новостей:
#news{
float:right;
clear:right}
Проверьте результат в браузере.


Теперь наша страница в браузере выглядит так:
Блоки справа один под другим


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


Практическое задание:сделать такую же страницу с помощью плавающих блоков.
  • зададим сначала размеры и фон для наших блоков;

  • сделаем блоки menu и content плавающими и левосторонними;

  • блок news должен прижиматься к правому краю, т.е. его мы сделаем правосторонним плавающим блоком, так, чтобы блок новостей был справа, а текст обтекал бы его слева (не забудьте блок news в html-коде расположить выше текста, т.е. до слова "контент").

Проверьте результат в браузере.


С помощью плавающих блоков верстать страницу проще: не надо рассчитывать пикселы, да и код короче. К тому же при "резиновой" верстке мы и не можем указать точное расположение блока на экране, а с помощью плавающих блоков нам это и не нужно, достаточно указать лишь ориентир (слева, справа, ниже или в той же линии).


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


Как вы помните при фиксированном позиционировании блок фиксируется относительно области просмотра. В некотором смысле фиксированные блоки похожи на фреймы. Только внутри фрейма доступна прокрутка, а внутри блока нет. У фиксированных блоков может быть один недостаток: они могут не поддерживаются старыми версиями Internet Explorer.


Попробуем на практике. Блок новостей зафиксируем справа так, чтобы при прокрутке страницы он оставался на месте.
#news{
position:fixed;
right:0px;
top:50px}
Проверьте результат в браузере.


Теперь наша страница в браузере при прокрутке выглядит так:
Фиксированные блоки


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


Источники:


Язык CSS. Позиционирование блоков. Язык CSS. Виды и свойства блоков.


comments powered by Disqus