3.16. Пропуск размещаемых элементов

Перенос в строках – неплохой способ сэкономить пространство, но иногда неуместный. Бывает, что область сбоку от свободно размещенного элемента хочется оставить незанятой, а следующий элемент начать в «нормальной» позиции. В этих случаях, чтобы помешать появлению элемента рядом со свободно размещенным объектом, используйте свойство clear со значениями left, right, both, none, inherit. Начальное значение: none. Данное свойство применимо к элементам уровня блока.

Описанное в этом примере правило гарантирует, что заголовки первого уровня начинаются в документе ниже, чем расположенные у левого края свободно размещенные элементы.

img {float: left; margin-right: 10рх; }

h1 {clear: left; top-margin: 2em; }

Аналогично работает и значение right, предотвращающее появление элемента рядом с размещенными справа. Значение both смещает элемент вниз, пока не будут пропущены свободно размещенные элементы справа и слева.

3.17. Позиционирование: основы

Существует четыре типа позиционирования, каждый из которых задается свойством position со значениями static, relative, absolute, fixed, inherit. Начальное значение: static

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

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

relative Относительное позиционирование перемещает прямоугольник, где содержится элемент, однако исходное пространство под него в документе сохраняется за самим элементом.

absolute Объекты с абсолютной позицией изымаются из потока содержимого документа и размещаются относительно охватывающего блока. В силу удаления из потока элемент больше не влияет на размещение окружающих элементов.

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

3.18. Охватывающий блок

Положение и размер прямоугольника элемента иногда вычисляются относительно другого прямоугольника, именуемого охватывающим блоком (containing block) данного конкретного элемента. CSS 2.1 содержит целый ряд правил установления границ таких блоков:

• Охватывающий блок, созданный корневым элементом (html), называют начальным. Прямоугольник такого блока полностью заполняет порт просмотра страницы. Начальный блок применяется, если другие охватывающие блоки в документе отсутствуют.

• Охватывающим блоком некорневых элементов со схемой relative или static являются край содержимого ближайшего блочного элемента, ячейки таблицы или родителя встроенного блока.

• При абсолютном позиционировании охватывающим элементом является ближайший элемент-предок со схемой, отличающейся от static. Другими словами, чтобы стать блоком, который охватывает потомки, элемент-предок должен позиционироваться по принципу relative, absolute или fixed.

• Если элемент встроенный, блок совпадает с областью содержимого.

• Если элемент-предок не существует, используется начальный охватывающий блок.