11.1. Наложение и область отображения.

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

• Строка не может быть разделена, что приводит к тому, что строчный блок станет шире, чем блочный.
• Блочный блок слишком широкий для объемлющего блока. Это может случиться тогда, когда свойство элемента 'width' имеет значение, которое приводит к тому, что сгенерированный блочный блок распространяется за стороны объемлющего блока.
• Высота элемента превышает точную высоту, присвоенную к объемлющему блоку (т.е. высота объемлющего блока определяется свойством 'height', а не высотой содержания).
• Блок позиционирован абсолютно.
• Он имеет отрицательные поля.

Где бы не происходил выход за пределы, свойство 'overflow' определяет, как блок обрезается. Свойство 'clip' определяет размер и форму района отображения. Определение маленького района для отображения может привести к отсечению содержания, видимого другим способом.

11.1.1. Наложение: свойство 'overflow'.

'overflow'
Тип значения:       visible | hidden | scroll | auto | inherit
Начальная величина: visible
Применяется:        к блочным и замещаемым элементам
Наследование:       нет
Процентная база:    нет
Медиа:              визуальные

Это свойство определяет, обрезается ли содержание блочного элемента, когда он выходит за пределы блока элемента (который действует, как объемлющий блок для содержания). Свойство имеет следующие значения:

visible

Это значение указывает на то, что содержание не обрезается, т.е. оно может быть визуализировано вне блочного блока.

hidden

Это значение указывает на то, что содержание отсекается, и механизм скроллинга не будет предоставлен для просмотра содержания вне района отсечения, пользователи не имеют доступ к отсеченному содержанию Размер и форма обрезаемого района определяется свойством 'clip'.

scroll

Это значение указывает на то, что содержание обрезается, и если устройство вывода использует механизм скроллинга, который виден на экране (полоса прокрутки), то такой механизм должен появляться для блока, обрезается ли его содержание или нет. Этим значением избегаются любые проблемы с полосой прокрутки, появляющейся или исчезающей в динамическом окружении. Когда это значение определено, и целевым устройством является 'print' или 'projection', то содержание, выходящее за пределы, должно выводиться на печать.

auto

Поведение значения 'auto' зависит от устройства вывода, но оно должно приводить к появлению механизма скроллинга для блоков, выходящих за пределы.

Даже если 'overflow' установлено, как 'visible', то содержание может быть обрезано для окна документа в устройстве вывода по естественным рабочим причинам.

Рассмотрим следующий пример блока BLOCKQUOTE, который слишком большой для своего объемлющего блока (установленного элементом DIV). Ниже представлен документ-источник:

<DIV>
<BLOCKQUOTE>
<P>I didn't like the play, but then I saw
it under adverse conditions - the curtain was up.
<DIV class="attributed-to">- Groucho Marx</DIV>
</BLOCKQUOTE>
</DIV>

Ниже приводится стилевая таблица, управляющая размерами и стилем сгенерированных блоков:

DIV { width : 100px; height: 100px;
      border: thin solid red;
      }

BLOCKQUOTE   { width : 125px; height : 100px;
      margin-top: 50px; margin-left: 50px; 
      border: thin dashed black
      }

DIV.attributed-to { text-align : right; }

Начальное значение 'overflow' – 'visible' так, что BLOCKQUOTE будет форматироваться без отсечения, подобно нижеследующему:

[D]

Установка 'overflow' как 'hidden' для элемента DIV с другой стороны приведет к обрезанию блока BLOCKQUOTE объемлющим блоком:

[D]

Значение 'scroll' сообщает устройству вывода, которые поддерживают механизм скроллинга, показать блок таким образом, чтобы пользователи могли получить доступ к обрезанному содержанию.

11.1.2. Область отображения: свойство 'clip'.

Область отображения определяет, какая порция визуализированного содержания элемента видна. По умолчанию этот район имеет тот же размер и форму, что и блок(и) элемента. Но эту область можно модифицировать с помощью свойства 'clip':

'clip'
Тип значения: <shape> | auto | inherit
Начальная величина: auto
Применяется: блочные и замещаемые элементы
Наследование: нет
Процентная база: нет
Медиа: визуальные

Свойство 'clip' применяется к элементам, которые имеют свойство 'overflow' со значением, отличным от 'visible'. Свойство имеет следующее значение:

auto

Область отображения имеет тот же размер и место положения, что и блок(и) элемента.

<shape>

В CSS2, единственное действительное значение <shape> : rect (прямоугольник) (<top> <right> <bottom> <left>), где <top>, <bottom> <right> и <left> определяют смещение от соответствующих сторон блока.
<top>, <right>, <bottom> и <left> могут иметь значения либо <length>, либо 'auto'. Отрицательные размеры разрешаются. Значение 'auto' определяет, что данный край области отображения будет точно таким же, как край сгенерированного блока элемента (т.е. 'auto' означает '0'.)
Когда координаты округляются до координат в пикселях, нужно быть осторожным, так как ни один пиксель не виден, когда <left> + <right> равны ширине элемента (или <top> + <bottom> равны высоте элемента), и наоборот, ни один пиксель не остается скрытым, когда эти значения равны 0.

Предки элементов тоже могут иметь области отображения (в случае, когда их свойство 'overflow' не является 'visible'); визуализируется результат пересечения различных областей отображения.

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

Следующие два правила:

P { clip: rect(5px, 10px, 10px, 5px); }
P { clip: rect(5px, -5px, 10px, 5px); }

будут создавать прямоугольные области отсечения, разграниченные штриховыми линиями в следующей иллюстрации:

[D]

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