Рассматривая в предыдущей статье пространственную модель, мы выяснили, что все содержимое страницы можно описать в виде набора пространственных элементов. Эти элементы - боксы - состоят из ядра (сердцевины), в качестве которого выступают тексты или рисунки, и окружения: бордюра, полей и отступов, параметры которых влияют на то, как будет выглядеть весь бокс на экране пользовательского компьютера.
Построения, определяющие расположение боксов на странице, описываются в CSS с помощью модели визуального представления (Visual Rendering Model). Как мы уже видели, низшим, конечным, элементом выступает не тег или группа тегов, а, допустим, текст, формат которого задан с помощью этих тегов. Однако согласно иерархии тегов в HTML-документе выстраивается и иерархия, или, как еще говорят, поток боксов. В одном документе могут быть боксы как принадлежащие к потоку, так и находящиеся вне его. Боксы, сгруппированные в поток, имеют предыдущий (если это не первый бокс) и последующие боксы (если рассматривается не последний бокс). Геометрические размеры каждого бокса, отношения бокса с предыдущими, родительскими, боксами и последующими определяют, как будет выглядеть страница в целом. Важно также заметить, что боксы в потоке расположены один над другим, напоминая слоеный пирог. Старшие, родительские, слои находятся ниже младших, порожденных, слоев.
Позиционирование
Имеющиеся на странице боксы составляют блок. Края блока, в данном случае края страницы, служат системой координат для позиционирования боксов на странице. Предусмотрено несколько вариантов позиционирования. В большинстве случаев можно обойтись двумя: абсолютным, когда положение бокса определяется относительно границ блока, и относительным, когда положение бокса определяется относительно предшествующего (родительского) блока.
Каждый из этих вариантов указывается в виде значения свойства position в синтаксисе позиционирования:
{position: значение}
Таким образом, в случае, когда используется абсолютное значение, задание варианта позиционирования выглядит как
{position: absolute},
а в случае применения относительного позициони-рования:
{position: relative}.
После того как определен вариант позиционирования, необходимо указать координаты позиционируемого бокса. Началом координат служит левый верхний угол блока или предыдущего бокса. Указываются, следовательно, два значения - отступа слева и отступа сверху от начала координат. Отступ слева указывается в следующей форме:
{top:значение}
для отступа сверху и
{left: значение}
для отступа слева.
Используя обе составляющие указания позиции - вариант позиционирования и задание координат, получаем следующий код:
"html"
"head"
"title"Рисунок 1"/title"
"/head"
"body"
"img src="adrov1.jpg"
style="position:absolute; left:0; top:0" width="40" height="50""
"/body"
"/html"
На примере, видно, что картинка прижата к верхнему левому углу, что соответствует нулевым отступам слева и сверху. Теперь в этом же примере употребим относительное позиционирование, применив код
"body"
"img SRC="adrov1.jpg"
STYLE="position:relative; left:0; top:0" WIDTH="40" HEIGHT="50""
"/body"
В этом случае картинка отстоит на некотором расстоянии от левого и верхнего краев страницы. Это вызвано тем, что картинка позиционирована относительно положения предыдущего бокса в потоке - бокса, содержимым которого является часть страницы, описанная тегом body.
Применяя оба варианта позиционирования, можно получить самые неожиданные результаты. На странице приведено несколько примеров.
Внешний вид бокса, содержащего картинку, текст и обведенного зеленым бордюром, задан кодом, в котором использовано как абсолютное, так и относительное позиционирование. Так, поведение элементов в левой верхней ячейке изображенной таблицы задано следующим образом:
"div style="position:relative;
left:0; top:0; height:120; width:100;border:solid green""Пример."br"
"img src="adrov1.jpg" style="position:absolute; left:0; top:0" width="40" height="50""Абсолютное позиционирование
"br""/div"
Для определения положения картинки в правой верхней ячейке таблицы (второй пример) было применено относительное позиционирование:
"img src="adrov1.jpg" style="position:relative; left:0; top:0" width="40" height="50"".
В остальных случаях изображение сдвинуто на 20 пикселов вправо и вниз. Остается только добавить, что величину отступов можно указывать как в общеупотребительных единицах измерения - пикселах (px), дюймах (in) или сантиметрах (cm), так и в типографских - пунктах (pt) и приведенных эквивалентах (размер буквы "m" употребляемого шрифта, em), а также в процентах.
Клиппинг
Клиппингом (clipping) называется отображение не всего содержимого бокса, а только какой-либо его части. Такое может случиться и автоматически, если размеры бокса превысят размеры блока. Вручную клиппинг задается в соответствии с синтаксисом
{clip: rect (координаты)}
Под координатами подразумеваются величины отступов сверху (top), справа (right), снизу (bottom) и слева (left), заданные относительно левого верхнего угла бокса. Подставляя необходимые значения, получаем конструкцию
{clip:rect (20 120 135 20)}
Применение данной конструкции можно видеть на следующем примере:
"html"
"head"
"title"Рисунок 4"/title"
"/head"
"body"
"div style="position:relative; left:0; top:0;
height:165; width:150; border:groove yellow""
"img src="adrov1.jpg" style="position:absolute; clip:rect (20 120 135 20)"""/div"
"/body"
"/html"
Переполнение
Обычно поверхности бокса бывает достаточно для того, чтобы поместить в него все его содержимое, однако в некоторых случаях содержимое бокса не может быть отображено полностью. Такая ситуация называется переполнением (overflow). Разработчики спецификации CSS2 называют следующие факторы, способствующие появлению переполнения:
- ширина бокса превышает ширину блока;
- длина бокса превышает длину блока;
- к боксу применено абсолютное позиционирование;
- у бокса есть поля, ширина которых задана отрицательными значениями.
Иногда при разработке Web-страницы переполнение может быть задано умышленно. Делается это согласно синтаксису
{overflow: значение}
Необходимое значение подбирается по таблице 1.
Два последних варианта весьма эффектны. В качестве примера приведем код, где употребляется вариант scroll. Результат исполнения этого кода приведен на рисунке 5.
"html"
"head"
"title"Рисунок 5"/title"
"/head"
"body"
"div style="position:relative; left:0; top:0;
height:140; width:140; border: solid blue; overflow:scroll""
Обычно поверхности бокса бывает достаточно для того... (overflow). "/div"
"/body"
"/html"
Видимость
При необходимости тот или иной бокс можно скрыть, сделав его невидимым. Бокс со всем своим содержимым при этом никуда не исчезает, а только становится невидимым, а следовательно, никаких перемен в позиционировании других боксов не произойдет. Задается невидимость назначением боксу свойства visibility. Синтаксис задания этого свойства таков:
{visibility: значение}
Значений для данного свойства предполагается два: visible делает бокс видимым и hidden - невидимым. Проиллюстрируем действие этого свойства на следующем примере:
Содержимое правой ячейки таблицы описано следующим кодом:
"h5"visibility:visible"/h5"
"DIV STYLE="position:relative; left:0; top:0;
height:100; width:100; border: solid green; visibility:visible""
Один, два, три, четыре, пять, шесть, семь...
"/DIV"
Видно
Так как находящемуся в этой ячейке боксу придано значение visible, он будет виден. Практически в идентичном описании бокса, находящегося в левой части таблицы, значение visible заменено на hidden, и, следовательно, бокс в левой ячейке таблицы не виден. Несмотря на кажущуюся несерьезность, назначение видимости или невидимости бокса дает авторам Web-страниц весьма серьезный инструмент, позволяющий с помощью скриптов создавать динамические элементы страниц, например разного рода выпадающие меню.
Отображение
Генерацией боксов можно управлять, меняя значения свойства display. Управление сводится к тому, что возможно устанавливать тип бокса, генерируемого тем или иным элементом страницы. Боксы бывают либо блочного уровня, то есть те, которые могут становиться блоками для последующих, порожденных блоков, либо встроенными. Указание типа генерируемого бокса происходит в соответствии с синтаксисом
{display: значение}
Варианты значений подбираются из табл. 2, где приведено несколько основных вариантов значений.
В качестве примера приведем код, согласно которому генерируется бокс блочного уровня:
"h5"display:block"/h5"
"div style="position:relative; left:0; top:0;
height:100; width:100; border: solid green; display:block""
Один, два, три, четыре, пять, шесть, семь...
"/div"
Бокс есть
Назначив свойству display значение none, не получим никакого бокса, что и видно на том же рисунке, но уже в правой его части.
Z-индекс
Как мы уже говорили, порядок размещения боксов можно сравнить со слоеным пирогом: боксы так же располагаются один над другим. Перед глазами пользователя оказываются, таким образом, только самые "верхние" боксы. CSS предусматривает возможность управления послойным размещением боксов, что особенно важно в случаях, когда один бокс частично или полностью перекрывает другой. Управлять послойным размещением боксов можно двумя способами: во-первых, размещая исходные элементы боксов таким образом, чтобы сгенерированные боксы не перекрывали один другого там, где это недопустимо; во-вторых, явно указывая порядок чередования боксов, или, в терминологии CSS, Z-индекса.
Указанный в соответствии с синтаксисом
{z-index: значение}
Z-индекс может принимать два значения. При значении auto боксы выстраиваются согласно положению генерирующих их элементов, при значении integer положение бокса определяется согласно назначенному ему целочисленному индексу. Боксы с назначенным им Z-индексом "складываются" снизу вверх в порядке следования индексов: чем меньше индекс, тем ниже расположен бокс. Самый нижний имеет по умолчанию номер 0, но допустимо задание и отрицательного номера. Такой бокс займет место ниже нулевого.
В примере разобран именно такой случай. На рисунке 8 приведена таблица, содержимое ячеек которой спозиционировано явным указанием Z-индекса.
В левой ячейке послойное позиционирование осуществляется автоматически (Z-индекс - auto), поэтому картинка, имеющая больший Z-индекс, закрыла нам часть текста. В коде же, описывающем содержимое левой ячейки таблицы, мы "подсунули" картинку ниже текста, назначив ей Z-индекс, равный -1. Эту часть кода и приведем в качестве примера:
"div style="position:relative; left:0; top:0;
height:100; width:100; border: solid green""Пример позиционирования."br"
Бокс позиционируется явным указанием Z-индекса."br""img src="coco.gif" style="position:absolute;
left:0; top:0; z-index:-1"""/div"