Поток документа
Начало формы
Конец формы
В HTML формирование элементов на странице происходит сверху вниз согласно схеме документа. Слой, размещенный в самом верху кода, отобразится раньше слоя, который расположен в коде ниже. Такая логика позволяет легко прогнозировать результат вывода элементов и управлять им. Порядок вывода объектов на странице и называется «потоком». При этом существует несколько возможностей «вырвать» элемент из потока и придать ему почти мифические свойства. Раз он не существует в потоке, то в коде его можно описать где угодно, а также выводить в заданное место окна.
Использование position
Свойство position задает позиционирование элемента относительно исходного положения или родителя. Рассмотрим для начала значение fixed, которое выводит элемент из потока и привязывает к определённой точке окна. Особенностью fixed является фиксация слоя на одном месте, причём это положение не меняется при изменении размеров окна или прокрутке страницы. Такая особенность позволяет создавать неподвижные элементы интерфейса вроде кнопки «Оставить отзыв», как показано в примере 3.10. Добавления fixed недостаточно, нужно также задать положение элемента с помощью одного или двух свойств left, top, right, bottom, они управляют положением относительно окна браузера.
Пример 3.10. Фиксированный слой
XHTML 1.0CSS 2.1IE 7IE 8IE 9Cr 12Op 11Sa 5Fx 5
<!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.1CSS 3IE 7IE 8IE 9Cr 12Op 11Sa 5Fx 5
<!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 ширина слоя автоматически приравнивается ширине контента плюс, как обычно, ширина отступов, границ и полей.