Позиционирование элементов

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

Свойства CSS имеющие отношения к позиционированию приведены в таблице.

NC — Netscape Communicator, IE — Microsoft Internet Explorer, W3C — Веб-стандарт CSS, 4+ означает, что свойство поддерживается в браузере с номером версии 4 и выше.

Положение элемента

Положение координат элемента зависит от свойства position, которому обычно присваивают значение absolute (абсолютное) или relative (относительное).

При абсолютном позиционировании элемент размещается относительно левого верхнего угла окна документа с помощью параметров left и top (рис. 1). В случае размещения слоя внутри другого, абсолютные координаты считаются от левого верхнего угла родительского слоя (рис. 2).

Рис. 1. Положение слоя относительно окна браузера

Кроме тегов DIV и SPAN абсолютное позиционирование поддерживают следующие элементы: APPLET, INPUT, BUTTON, OBJECT, SELECT, FIELDSET, IFRAME, TABLE, IMG, TEXTAREA.

Параметр position: relative используется для смещения слоя относительно родительского элемента (рис. 2). Установка этого значения не изменяет размещение элемента, но если установлены значения свойств top или left, то слой смещается от своего нормального положения в документе.

Рис. 2. Положение слоя относительно родительского элемента

Последние версии браузеров стали поддерживать еще один способ размещения элементов на веб-странице — через свойства bottom и right, определяющих положение правого нижнего угла элемента. Пока, однако, такое задание координат не так распространено и ограничено тем, что не все браузеры его поддерживают. Поэтому более традиционным вариантом можно считать определение положения элемента с помощью параметров left и top (пример 2).

Значения координат могут принимать и отрицательные значения, тогда дочерний элемент будет накладываться на предыдущий элемент, как показано на рис. 3.

Рис. 3. Результат наложения элементов

Область вырезки

Если взять лист бумаги и проделать в нем прямоугольное отверстие, то при наложении на другой лист с текстом он будет закрывать и делать невидимым все, где нет выреза. Этот принцип лежит в основе многих идей — маски в графических редакторах и область вырезки на веб-страницах.

Параметр clip определяет область позиционированного элемента, в которой будет показано его содержимое. Все, что не помещается в эту область, будет обрезано и становится невидимым. На данный момент единственно доступная форма области — прямоугольник. Все остальное остается только в мечтах.

Расстояние от края элемента до области вырезки определяется по следующему шаблону.

Если край области нужно оставить без изменений, следует поставить параметр auto (пример 2).

Несколько замечаний:

• Параметр clip работает только для абсолютно позиционированных элементов.
• Браузер Opera не поддерживает это свойство CSS.

Полосы прокрутки

Свойство overflow управляет содержанием блочного элемента, если оно целиком не помещается и выходит за область заданных размеров. Параметр overflow принимает одно из четырех значений.
visible — отображается все содержание элемента, даже за пределами установленной высоты и ширины.
hidden — отображается только область внутри элемента, остальное будет обрезано.
scroll — всегда добавляются полосы прокрутки.
auto — полосы прокрутки добавляются только при необходимости.

Приведенный ниже пример демонстрирует создание текстового блока с полосой прокрутки (пример 3).

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