Поток документа

22.07.2011

Влад Мержевич

В HTML формирование элементов на странице происходит сверху вниз согласно схеме документа. Слой, размещенный в самом верху кода, отобразится раньше слоя, который расположен в коде ниже. Такая логика позволяет легко прогнозировать результат вывода элементов и управлять им. Порядок вывода объектов на странице и называется «потоком». При этом существует несколько возможностей «вырвать» элемент из потока и придать ему почти мифические свойства. Раз он не существует в потоке, то в коде его можно описать где угодно, а также выводить в заданное место окна.

Использование position

Свойство position задает позиционирование элемента относительно исходного положения или родителя. Рассмотрим для начала значение fixed, которое выводит элемент из потока и привязывает к определённой точке окна. Особенностью fixed является фиксация слоя на одном месте, причём это положение не меняется при изменении размеров окна или прокрутке страницы. Такая особенность позволяет создавать неподвижные элементы интерфейса вроде кнопки «Оставить отзыв», как показано в примере 3.10. Добавления fixed недостаточно, нужно также задать положение элемента с помощью одного или двух свойств left, top, right, bottom, они управляют положением относительно окна браузера.

Пример 3.10. Фиксированный слой

XHTML 1.0CSS 2.1IECrOpSaFx

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <title>Фиксированный слой</title>
  <style type="text/css">
   BODY {
    margin-left: 90px; /* Отступ слева */ 
   }
   .feedback {
    position: fixed; /* Фиксированное положение */
    left: 0; top: 50%; /* Положение */
    background: #fc0; /* Цвет фона */
    width: 70px; /* Ширина слоя */
    padding: 5px; /* Поля */
   }
  </style>
 </head>
 <body>
  <p>Я вновь увидел Теночтитлан, великолепные покои во дворце Монтесумы и
  себя самого, спящего на золотом ложе. Я знал, что я бог Тескатлипока и
  наутро меня принесут в жертву. Я спал, измученный я удрученный, и видел
  сон. Я видел во сне, будто стою на том самом месте, где стоял сейчас, и
  запах наших цветов щекочет мне ноздри, как в эту ночь, и сладкие
  соловьиные песни звучат точно так же, как звучали они в моих ушах. Мне
  снилось, что, пока я стоял и слушал соловьев, над зелеными кронами дубов и
  ясеней взошла луна, — вот, вот она уже сияет в небесах. Мне снилось, что
  чей-то голос запел за холмом, но тут я пробудился от давно забытых видений
  прошлого.</p>
  <div class="feedback">Оставить<br />отзыв</div>
 </body>
</html>

Результат данного примера показан на рис. 3.20. Чтобы текст не накладывался на слой, добавлен отступ слева. Из-за того что слой feedback не существует в потоке документа, он может располагаться в любом месте кода, в данном случае внизу.

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

Рис. 3.20. Фиксированный слой

Значение absolute свойства position также выводит элемент из потока, но в отличие от fixed слой прокручивается вместе с содержимым. Кроме этого, существенное влияние на позицию оказывают свойства родителя. Возможны два основных варианта.

Родитель отсутствует (его роль выполняет <body>) или у родителя не задано свойство position.
У родителя элемента установлено свойство position в значении absolute или relative.

В первом случае все просто, элемент ведет себя как в примере 3.10, за исключением того, что не закрепляется строго на одном месте, а может прокручиваться одновременно со страницей. Во втором варианте положение элемента задаётся относительно родителя.

В примере 3.11 создаётся два вложенных слоя с абсолютным позиционированием. Координаты первого слоя layer1 задаются относительно окна браузера, координаты второго слоя layer2 относительно границ слоя layer1.

Пример 3.11. Абсолютное позиционирование

XHTML 1.0CSS 2.1IECrOpSaFx

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <title>Позиционирование</title>
  <style type="text/css">
   .layer1 {
    width: 217px; /* Ширина слоя */
    height: 512px; /* Высота слоя */
    background: url(images/bg2.png) no-repeat; /* Фоновая картинка */
    position: absolute; /* Абсолютное позиционирование */
    right: 20%; /* Положение справа */
    bottom: 0; /* Положение снизу */
   }
   .layer2 {
    background: #000; /* Цвет фона для IE */
    background: rgba(0,0,0, 0.5); /* Цвет фона с полупрозрачностью */
    color: #fff; /* Цвет текста */
    position: absolute; /* Абсолютное позиционирование */
    bottom: 30px; /* Положение снизу */
    width: 207px; /* Ширина слоя */
    padding: 5px; /* Поля */
   }
  </style>
 </head>
 <body>
  <div class="layer1">
   <div class="layer2">
     Позвоночник человека
   </div>
  </div>
 </body>
</html>

Результат данного примера показан на рис. 3.21. Браузер IE до версии 9.0 не поддерживает формат RGBA для цвета.

Положение слоя на странице

Рис. 3.21. Положение слоя на странице

Обратите внимание, что абсолютно позиционированный элемент может выходить за верхний и левый край окна браузера, при этом не возникает полос прокрутки. Также при использовании свойства position ширина слоя автоматически приравнивается ширине контента плюс, как обычно, ширина отступов, границ и полей.

Использование float

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

галереи небольших фотографий;
двух и трёхколоночные макеты;
горизонтальные меню;
иллюстрации в тексте;
многоколоночный текст.

float может добавляться к изображениям (тег <img>), блочным элементам вроде <p>, <div> и к строчным элементам (<span>, <a>, <strong>). В примере 3.12 показано использование float для абзаца с фотографией.

Пример 3.12. Плавающий элемент

XHTML 1.0CSS 2.1IECrOpSaFx

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <title>Обтекание</title>
  <style type="text/css">
   .right {
    float: right;
   }
  </style>
 </head>
 <body>
  <p class="right"><img src="images/cat.jpg" alt="Кошка" /></p>
  <p>Сфотографировано на камеру Canon EOS 50D. Объектив 24-105, 
  диафрагма 4.0, выдержка 1/500, чувствительность ISO 400</p>
 </body>
</html>

Результат примера показан на рис. 3.22.

Плавающий элемент

Рис. 3.22. Плавающий элемент

Свойство float лишь частично влияет на элемент в потоке. Можно управлять положением по горизонтали, меняя значение float с right на left, но по вертикали положение элемента задаётся его местом в коде.

вёрстка

Поток документа

Использование position

Использование float

CSS по теме