Спецификация CSS2

ПА для непрерывных носителей обычно предлагают пользователю порт просмотра (окно или другую область просмотра на экране), в котором пользователь видит документ. ПА могут изменять внешний вид документа, если порт просмотра изменил размеры (см. начальный содержащий блок). Если порт просмотра меньше, чем начальный содержащий блок документа, ПА должен предоставить механизм прокрутки. Имеется не менее одного порта просмотра в канве, но ПА могут отображать более чем одну канву (т.е. предоставлять различные виды того же самого документа).

В CSS2 многие варианты позиционирования и размеры вычисляются относительно кромки прямоугольного бокса, называемого содержащий блок. Обычно генерируемые боксы действуют как содержащие блоки для боксов-потомков; мы говорим, что бокс "устанавливает" содержащий блок для своих потомков. Фраза "блок, содержащий бокс" означает "блок, в котором бокс находится", а не блок, генерирующий бокс.

Каждый бокс имеет позицию относительно содержащего блока, но не ограничен этим блоком и может вызвать переполнение.

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

Ширина начального содержащего блока может быть специфицирована свойством 'width' корневого элемента. Если это свойство имеет значение 'auto', ПА предоставляет начальное значение ширины (например, ПА использует текущую ширину порта просмотра).

Высота начального содержащего блока может быть специфицирована свойством 'height' корневого элемента. Если это свойство имеет значение 'auto', высота содержащего блока увеличивается, чтобы приспособиться к содержимому документа.

Начальный содержащий блок не может быть позиционирован или всплывать (т.е. ПА игнорируют свойства 'position' и 'float корневого элемента).

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

Элементы уровня блока это элементы документа-источника, визуально отформатированные как блоки (например, параграфы). Различные значения свойства 'display' создают элемент уровня блока: 'block', 'list-item', 'compact', 'run-in' (не всегда; см. компактные и втягивающиеся боксы) и 'table'.

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

Некоторые элементы уровня блока генерируют дополнительные боксы за пределами основного бокса: элементы 'list-item' и элементы с маркёрами. Эти дополнительные боксы размещаются относительно основного бокса.

В этом документе:

  Some text
  
More text

(и приняв, что и DIV, и P оба имеют 'display: block'), DIV имеет содержимое и инлайн-уровня, и уровня блока. Чтобы легче было определить форматирование, мы примем, что вокруг "Some text" имеется анонимный бокс блока.

На диаграмме изображены три бокса, один из которых анонимный, в примере - верхний.

[D]

Другими словами: если бокс блока (такой как сгенерированный в DIV выше) имеет внутри себя другой бокс блока (как P), тогда мы заставляем его иметь боксы блока только внутри себя, перенеся любые инлайн-боксы в анонимный бокс блока.

Эта модель будет применена в следующем примере, если данные правила:

/* Примечание: ПАгенты HTML могут не рассматривать эти правила */
BODY { display: inline }
P    { display: block }

будут использованы в данном документе HTML:

Анонимный текст до P.
Содержимое элемента P. 
Анонимный текст после P.

Элемент BODY содержит отрывок (C1) анонимного текста, после которого идут элемент уровня блока и второй отрывок анонимного текста (C2). В результате получим анонимный бокс блока> для BODY, содержащий анонимный бокс блока вокруг C1, бокс блока P и второй анонимный бокс блока вокруг C2.

Свойства анонимных боксов наследуются из содержащего неанонимного бокса (в примере: из DIV). Ненаследуемые свойства имеют свои начальные значения. Например, шрифт анонимного бокса наследуется из DIV, но поля имеют значения 0.

Инлайн-элементы это те элементы документа-источника, которые не образуют новых блоков содержимого; содержимое определяется в строке (на месте) (например, выделенные участки текста внутри параграфа, инлайн-изображения и т.п.). Различные значения свойства 'display' делают элемент инлайн: 'inline', 'inline-table', 'compact' и 'run-in' (не всегда; см. компактные и втягивающиеся боксы). Элементы инлайн-уровня (встроенные) генерируют инлайн-боксы.

Инлайн-боксы могут принимать участие в различных контекстах форматирования:

[x]. Внутри бокса блока инлайн-бокс участвует в инлайн-контексте форматирования.

[x]. Инлайн-бокс compact расположен в поле бокса блока.

[x]. Боксы-маркёры имеют позицию также вне бокса блока.

Некоторый выделенный текст.

Бокс compact ведёт себя так:

[x]. Если бокс блока (не поплавок и не позиционированный абсолютно) следует после бокса compact, то compact-бокс форматируется как однострочный инлайн-бокс. Ширина результирующего бокса сравнивается с одним из полей бокса блока. Выбор левого или правого поля определяется в 'direction', специфицируемом для элемента, производящего содержащий блок для compact-бокса и следующего бокса. Если ширина инлайн-бокса меньше, чем/равна ширине поля, то инлайн-бокс позиционируется в поле, как описано далее.

[x]. В ином случае compact-бокс становится боксом блока.

Compact-бокс позиционируется в поле следующим образом: он находится вне (слева или справа от) первого cтрочного бокса блока, но влияет на расчёт высоты cтрочного бокса. Свойство 'vertical-align' compact-бокса определяет вертикальную позицию compact-бокса относительно cтрочного бокса. Позиция compact-бокса по горизонтали - всегда в поле бокса блока.

Элемент, который не может быть отформатирован в пределах одной строчки, не может размещаться в поле последующего блока. Например, элемент 'compact' в HTML, который содержит элемент BR, всегда будет форматироваться как бокс блока (принимая для BR стиль по умолчанию, когда вставляется новая строка). Для размещения многострочного текста в поле часто больше подойдёт свойство 'float.

Следующий пример иллюстрирует compact-бокс:

  
    
    
  
  
    

      
Short
        
Description goes here.
      
too long for the margin
        
Description goes here.
    
  

Этот пример может выглядеть после форматирования так:

short    Description goes here

too long for the margin
         Description goes here

Свойство 'text-align' можно использовать для выравнивания compact-элемента внутри поля: у левого края поля ('left'), у правого края поля ('right') или по центру поля ('center'). Значение 'justify' не применяется и обрабатывается или как 'left', или как 'right', в зависимости от 'direction'/направления элемента блока, в поле которого форматируется compact-элемент ('left', если направление - 'ltr', 'right', если направление 'rtl').

Информацию о том, как compact-боксы взаимодействуют с генерируемым содержимым, см. в разделе генерируемое содержимое.

Бокс run-in ведёт себя так:

[x]. Если бокс блока (не поплавок и не позиционированный абсолютно) следует за боксом run-in, то бокс run-in становится первым инлайн-боксом в боксе блока.

[x]. Иначе бокс run-in становится боксом блока.

Бокс 'run-in' используется для run-in-заголовков, как в этом примере:

  
    
    
  
  
    
Заголовок run-in. 
    
И параграф текста,
       следующий за ним.
  

Этот пример может форматироваться так:

  Заголовок run-in. И
  параграф текста, 
  следующий за ним.

Свойства run-in-элемента наследуются от родителя в дереве-источнике, а не от бокса блока, частью которого он визуально является.

Информацию о том, как compact-боксы взаимодействуют с генерируемым содержимым, см. в разделе Генерируемое содержимое.

'display'

Значение: inline | block | list-item | run-in | compact | marker | table | inline-table | table-row-group | table-header-group | table-footer-group | table-row | table-column-group | table-column | table-cell | table-caption | none | inherit

Начальное: inline

Применяется: все элементы

Наследуется: нет

Процентное: N/A

Носитель: все

Значения этого свойства имеют следующий смысл:

block

Элемент генерирует основной бокс блока.

inline

Элемент генерирует один или более инлайн-боксов.

list-item

Элемент (например, LI в HTML) генерирует основной бокс блока и инлайн-бокс элемента списка. О списках и примерах форматирования списков см. раздел списки.

marker

Объявляет генерируемое содержимое до или после бокса-маркёра. Это значение должно использоваться только вместе с псевдоэлементами :before и :after, присоединёнными к элементам уровня блока. В других случаях это значение интерпретируется как 'inline'. См. также раздел Маркёры.

none

Элемент не генерирует боксы в структуре форматирования (т.е. элемент не влияет на вид документа). Элементы-потомки не генерируют никаких боксов; это поведение не может быть переопределено установкой у потомков свойства 'display'.

Обратите внимание, что отображение 'none' не создаёт невидимый бокс; боксы вообще не создаются. CSS содержит механизмы, делающие возможным генерацию элементом бокса в структуре форматирования, который влияет на структуру форматирования, но невидим. См. детали в разделе Видимость.

run-in и compact

Эти значения создают боксы блока и инлайн, в зависимости от контекста. Свойства, применяемые к боксам run-in и compact, базируются на окончательном статусе боксов (уровень инлайн или блока). Например, свойство 'white-space' применяется только тогда, когда бокс получает уровень блока.

table, inline-table, table-row-group, table-column, table-column-group, table-header-group, table-footer-group, table-row, table-cell и table-caption

При установке этих значений, элемент ведёт себя как элемент таблицы (ограничения описаны в главе Таблицы).

Заметьте, что, хотя начальное значение 'display' - 'inline', правила в таблицах по умолчанию в ПА могут переопределить это значение. См. пример таблицы стилей для HTML 4.0 в приложении.

Несколько примеров свойства 'display':

P   { display: block }
EM  { display: inline }
LI  { display: list-item } 
IMG { display: none }      /* Не выводить изображения */

Соответствующие ПА HTML могут игнорировать свойство 'display'.

Свойства 'position' и 'float' определяют, какой из алгоритмов позиционирования CSS2 используется для расчёта позиции бокса.

'position'

Значение: static | relative | absolute | fixed | inherit

Начальное: static

Применяется: ко всем элементам, но не к генерируемому содержимому

Наследуется: нет

Процентное: N/A

Носитель: визуальный

Значения имеют следующий смысл:

static

Бокс является нормальным боксом, расположенным в соответствии с нормальным расположением. Свойства 'left' и 'top' не применяются.

relative

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

absolute

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

fixed

Позиция бокса вычисляется в соответствии с моделью 'absolute', но, в дополнение к этому, бокс фиксируется в соответствии с некоторой ссылкой. В случае с непрерывными носителями, бокс фиксируется относительно порта просмотра (и не перемещается при прокрутке). В случае со страничными носителям, бокс фиксируется относительно страницы, даже если страница просматривается через порт просмотра (в случае просмотра перед печатью, например). Авторам может понадобиться специфицировать 'fixed' способом, не зависящим от носителя. Например, автор может захотеть, чтобы бокс оставался в верхней части порта просмотра экрана, но не вверху каждой печатаемой страницы. Две такие спецификации можно разделить, используя правило @media, как здесь:

@media screen { 
  H1#first { position: fixed } 
}
@media print { 
  H1#first { position: static }
}

Элемент называется позиционированным, если его свойство 'position' имеет значение, отличное от 'static'. Позиционированные элементы генерируют позиционированные боксы, располагающиеся в соответствии с четырьмя свойствами:

'top'

Значение: | | auto | inherit

Начальное: auto

Применяется: к позиционируемым элементам

Наследуется: нет

Процентное: относительно высоты содержащего блока

Носитель: визуальный

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

'right'

Значение: | | auto | inherit

Начальное: auto

Применяется: к позиционируемым элементам

Наследуется: нет

Процентное: относительно ширины содержащего блока

Носитель: визуальный

Это свойство специфицирует, насколько смещён влево правый край содержимого бокса относительно правого края содержащего блока.

'bottom'

Значение: | | auto | inherit

Начальное: auto

Применяется: к позиционируемым элементам

Наследуется: нет

Процентное: относительно высоты содержащего блока

Носитель: визуальный

Это свойство специфицирует, насколько смещён вверх нижний край содержимого бокса относительно низа содержащего блока.

'left'

Значение: | | auto | inherit

Начальное: auto

Применяется: к позиционируемым элементам

Наследуется: нет

Процентное: относительно ширины содержащего блока

Носитель: визуальный

Это свойство специфицирует, насколько смещён вправо левый край содержимого бокса относительно левого края содержащего блока.

Значения для этих четырёх свойств имеют следующий смысл:

Смещением является расстояние от соответствующего края.

Смещением является процент ширины содержащего блока (для 'left' или 'right') или высоты содержащего блока (для 'top' и 'bottom'). Для 'top' и 'bottom', если высота содержащего блока не специфицирована явно (т.е. зависит от высоты содержимого), процентное значение интерпретируется так же, как 'auto'.

auto

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

Для абсолютно позиционируемых боксов - смещения являются относительными к содержащему блоку бокса. Для относительно позиционируемых боксов - смещения являются относительными к внешним краям самого бокса (т.е. боксу задаётся нормальное расположение, а затем - смещение от этой позиции в соответствии с вышеуказанными свойствами).

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

В контексте форматирования блока левый внешний край бокса касается левого края содержащего блока (для форматирования справа-налево - касается правый край). Это верно даже в случае с поплавками (хотя область содержимого может усекаться из-за поплавков).

Информацию о разрывах страниц в страничных носителях см. в разделе допустимые разрывы страниц.

В контексте инлайн-форматирования боксы устанавливаются по горизонтали, один за другим, начиная от верха содержащего блока. Горизонтальные поля, рамки и заполнение рассматриваются как отношения между боксами. Боксы могут быть выровнены по вертикали несколькими способами: могут быть выровнены их нижние или верхние края или базовые линии текста внутри них. Прямоугольная область, содержащая боксы, которые образуют строку, называется строчный бокс.

Ширина cтрочного бокса определяется содержащим блоком. Высота cтрочного бокса определяется правилами из раздела вычисление высоты строки. Строчный бокс всегда имеет высоту, достаточную для содержащихся в нём боксов. В то же время, он может быть выше, чем самый высокий из содержащихся в нём боксов (если, например, боксы выровнены так, что базовые линии выстроены). Если высота бокса В меньше, чем высота cтрочного бокса, содержащего его, то вертикальное выравнивание В внутри cтрочного бокса определяется свойством 'vertical-align'.

Если несколько инлайн-боксов не входят по горизонтали в один cтрочный бокс, они распределяются на два или более вертикально упакованных строчных бокса. Таким образом, параграф будет вертикальным стеком из строчных боксов. Строчные боксы упакованы по вертикали без разделения и никогда не перекрываются.

Вообще, левый край cтрочного бокса касается левого края его содержащего блока, и правый край касается правого края его содержащего блока. В то же время, боксы-поплавки могут появляться между краем содержащего блока и краем строчного блока. Таким образом, хотя строчные боксы в том же самом контексте инлайн-форматирования обычно имеют ту же самую ширину (что и содержащий блок), они могут иметь и другую ширину из-за поплавков, уменьшающих горизонтальное пространство. Строчные боксы в том же самом контексте инлайн-форматирования обычно различаются по высоте (например, одна строка может содержать высокое изображение, а другие строки - только текст).

Если суммарная ширина инлайн-боксов в строке меньше, чем ширина cтрочного бокса, содержащего их, то их распределение по горизонтали внутри cтрочного бокса определяется свойством 'text-align'. Если это свойство имеет значение 'justify', ПА может уплотнить инлайн-боксы.

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

Инлайн-боксы могут также быть разделены на несколько боксов внутри одного cтрочного бокса из-за двунаправленной обработки текста.

Вот пример конструкции инлайн-боксов. Следующий параграф (созданный элементом Р уровня блока в HTML) содержит анонимный текст, распределённый между элементами EM и STRONG:

Several emphasized words appear
in this sentence, dear.

Элемент P генерирует бокс блока, содержащий пять инлайн-боксов, три из которых - анонимные:

[x]. Anonymous: "Several"

[x]. EM: "emphasized words"

[x]. Anonymous: "appear"

[x]. STRONG: "in this"

[x]. Anonymous: "sentence, dear."

Чтобы сформатировать параграф, ПА вставляет пять боксов в cтрочный бокс. В этом примере бокс, генерируемый для элемента P, устанавливает содержащий блок для строчных боксов. Если содержащий блок достаточно широк, все инлайн-боксы войдут в один cтрочный бокс:

Several emphasized words appear in this sentence, dear.

если нет, инлайн-боксы будут разделены и распределены по нескольким строчным боксам. Предыдущий параграф может быть разделён так:

Several emphasized words appear
in this sentence, dear.

или так:

Several emphasized  
words appear in this 
sentence, dear.

В предыдущем примере бокс EM был разделён на два бокса EM (назовём их "split1" и "split2"). Поля, рамки, заполнение или текстовый орнамент не имеют видимого эффекта после split1 или до split2.

Рассмотри следующий пример:

  
    
    
  
  
    
Several emphasized words appear here.
  

В зависимости от ширины P, боксы могут распределиться так:

[x]. Поле вставлено до "emphasized" и после "words".

[x]. Заполнение вставлено до, сверху и снизу от "emphasized" и после, сверху и снизу от "words". Пунктирная рамка отображается с трёх сторон в каждом случае.

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

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

Относительно позиционированный бокс генерируется, когда свойство 'position' элемента имеет значение 'relative'. Смещение специфицируется свойствами 'top', 'bottom', 'left' и 'right'.

Динамическое перемещение боксов, позиционированных относительно, может создавать эффекты анимации в среде скриптов (см. также свойство 'visibility'). Относительное позиционирование можно использовать также как общую форму под- и надиндексов, за исключением того, что высота строки не устанавливается автоматически при рассмотрении позиционирования. См. дополнительно описание вычисления высоты строки.

Примеры относительного позиционирования есть в разделе Сравнение нормального позиционирования, поплавков и абсолютного позиционирования.

'float

Значение: left | right | none | inherit

Начальное: none

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

Наследуется: нет

Процентное: N/A

Носитель: визуальный

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

Значения этого свойства имеют следующий смысл:

left

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

right

То же, что 'left', но содержимое обтекает по левой стороне бокса, начиная от верха.

none

Бокс не всплывает.

Вот точные правила, управляющие поведением поплавка:

1Левый внешний край всплывающего влево бокса не может быть слева от левого края его содержащего блока. Аналогичное правило действует для элементов, всплывающих вправо.

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

3Правый внешний край всплывающего влево бокса не может быть справа от левого внешнего края какого-либо всплывающего вправо бокса, находящегося справа от него. Аналогичные правила действуют для элементов, всплывающих вправо.

4Верхний внешний край всплывающего бокса не может быть выше, чем верх его содержащего блока.

5Верхний внешний край всплывающего бокса не может быть выше, чем верхний внешний край любого всплывающего бокса блока, сгенерированного элементом ранее в документе-источнике.

6Верхний внешний край всплывающего бокса элемента не может быть выше, чем верх любого cтрочного бокса, содержащего бокс, сгенерированный элементом ранее в документе-источнике.

7Всплывающий влево бокс, имеющий слева от себя другой всплывающий влево бокс, не может иметь свой правый внешний край справа от правого края своего содержащего блока. (Говоря шире: левый поплавок не может находиться у правого края, если только он уже не находится слева так далеко, насколько это возможно.)Аналогичное правило действует для элементов, всплывающих вправо.

8Всплывающий бокс должен быть размещён так высоко, насколько это возможно.

9Всплывающий влево бокс обязан быть размещён так далеко влево, насколько это возможно, а всплывающий вправо бокс обязан быть размещён так далеко вправо, насколько это возможно. Более высокая позиция имеет преимущество перед позицией, идущей далее влево/вправо.

'clear'

Значение: none | left | right | both | inherit

Начальное: none

Применяется: к элементам уровня блока

Наследуется: нет

Процентное: N/A

Носитель: визуальный

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

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

Значения имеют следующий смысл при применении к невсплывающим боксам блока:

left

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

right

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

both

Генерируемый бокс перемещается ниже всех всплывающих боксов элементов, появившихся ранее в документе-источнике.

none

Нет ограничений на позицию бокса относительно поплавков.

Если свойство установлено на всплывающие элементы, результатом будет модификация правил позиционирования поплавка. Прибавляется дополнительное условие (#10):

[x]. Верхний внешний край поплавка обязан быть ниже нижнего внешнего края всех ранее всплывающих влево боксов (если 'clear: left'), или всех ранее всплывающих вправо боксов (если 'clear: right'), или обоих ('clear: both').

Фиксированное позиционирование это подкатегория абсолютного позиционирования. Единственное отличие в том, что для фиксированно позиционированного бокса содержащий блок устанавливается портом просмотра. Для непрерывных носителей фиксированные боксы не перемещаются при прокрутке документа. В этом смысле они похожи на фиксированные фоновые изображения. Для страничных носителей боксы с фиксированной позицией повторяются на каждой странице. Это используется для размещения, к примеру, подписи внизу каждой страницы.

Авторы могут использовать фиксированное позиционирование для создания фрэймоподобных презентаций. Рассмотрим следующую структуру фрэймов:

Этого можно добиться с помощью такого документа HTML и таблицы стилей:

  
    
    
  
  
    
 ...  
    
 ...  
    
 ...  
    
 ...  
  

Рассмотрим следующие объявления CSS для outer и inner, которые не изменяют нормального расположения боксов:

#outer { color: red }
#inner { color: blue }

Элемент P содержит всё инлайн-содержимое: анонимный инлайн-текст и два элемента SPAN. Следовательно, всё содержимое будет расположено вне инлайн-контекста форматирования внутри содержащего блока, устанавливаемого элементом P, и получится что-то подобное:

Чтобы увидеть действие относительного позиционирования, мы специфицируем:

#outer { position: relative; top: -12px; color: red }
#inner { position: relative; top: 12px; color: blue }

Текст расположен нормально до элемента outer. Текст outerзатем всплывает в своей нормальной позиции и размерах в конце строки 1. Затем инлайн-боксы, содержащие текст (распределённый на три строки), сдвигаются вместе на '-12px' (вверх).

Содержание inner как дочернего от outer было бы нормально расположено сразу после слов "of outer contents" (на строке 1.5). Однако содержимое innerсамо смещено относительно содержимого outer на '12px' (вниз), обратно на свою первоначальную позицию на строке 2.

Обратите внимание, что на содержимое, следующее после outer, Относительное позиционирование outer не влияет.

Заметьте также, что, имея смещение для outer '-24px', текст outer и текст тела могут быть перекрыты.

Теперь рассмотрим эффект от всплывания текста элемента inner вправо при использовании следующих правил:

#outer { color: red }
#inner { float: right; width: 130px; color: blue }

Текст нормально расположен до бокса inner, который вытолкнут из расположения и всплыл к правому полю (его 'width' установлено явно). Строчные боксы слева от поплавка укорочены, и оставшийся текст документа всплывает в них.

Чтобы увидеть действие свойства 'clear', мы добавим в пример родственные элементы:

  
    
  
  
    
Beginning of body contents.
       Start of outer contents.
       Inner contents.
       Sibling contents.
      End of outer contents.
      End of body contents.
    
  

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

#inner { float: right; width: 130px; color: blue }
#sibling { color: red }

заставляют бокс inner всплывать вправо, как и раньше, а остальной текст документа - всплывать в незанятом пространстве:

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

#inner { float: right; width: 130px; color: blue }
#sibling { clear: right; color: red }

Наконец, мы рассмотрим действие абсолютного позиционирования. Вот объявления CSS для outer и inner:

#outer { 
    position: absolute; 
    top: 200px; left: 200px; 
    width: 200px; 
    color: red;
}
#inner { color: blue }

которые позиционируют верх бокса outer относительно его содержащего блока. Содержащий блок для позиционируемого бокса устанавливается ближайшим позиционированным предком (или, если таковой не существует, начальным содержащим блоком, как в нашем примере). Верхняя сторона бокса outer на '200px' ниже верха содержащего блока, а левая сторона - на '200px' от левой стороны. Дочерний бокс outer'а позиционирован нормально относительно родителя.

#outer { 
  position: relative; 
  color: red 
}
#inner { 
  position: absolute; 
  top: 200px; left: -100px; 
  height: 130px; width: 130px; 
  color: blue;
}

В результате получится примерно так:

Если мы не позиционируем бокс outer:

#outer { color: red }
#inner {
  position: absolute; 
  top: 200px; left: -100px; 
  height: 130px; width: 130px; 
  color: blue;
}

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

Относительное и абсолютное позиционирование может использоваться для выполнения смены баннеров, как показано в следующем примере. Такой документ:

I used two red hyphens to serve as a change bar. They
will "float" to the left of the line containing THIS
--
word.

может дать в результате примерно это:

Сначала параграф (стороны содержащего блока которого показаны на иллюстрации) расположен нормально. Затем он смещается на '10px' от левого края содержащего блока (таким образом, правое поле в '10px' резервируется для предполагаемого смещения). Два дефиса, работающие как сменяющиеся баннеры, изымаются из расположения и позиционируются на текущей строке (поскольку 'top: auto'), на '-1em' от левого края своего содержащего блока (установленного P в свою окончательную позицию). В результате сменяющиеся баннеры "всплывают" слева от текущей строки.

'z-index'

Значение: auto | | inherit

Начальное: auto

Применяется: к позиционированным элементам

Наследуется: нет

Процентное: N/A

Носитель: визуальный

Для позиционированных боксов свойство 'z-index' специфицирует:

1Уровень стэка бокса в текущем контексте стэка.

2Устанавливает ли бокс локальный контекст стэка.

Значения имеют следующий смысл:

Это целое число - уровень стэка сгенерированного бокса в текущем контексте стэка. Бокс также устанавливает локальный контекст стэка со своим уровнем в стэке '0'.

auto

Уровень стэка сгенерированного бокса в текущем контексте стэка тот же, что и у бокса-родителя. Бокс не устанавливает новый локальный контекст стэка.

В следующем примере уровни стэка боксов (именованных своими атрибутами "id"): "text2"=0, "image"=1, "text3"=2 и "text1"=3. Уровень стэка для "text2" наследуется от корневого бокса. Остальные - специфицируются свойством 'z-index'.

  
    
    
  
  
    

      

    

      This text will overlay the butterfly image.
    

    

      This text will be beneath everything.
    

    

      This text will underlay text1, but overlay the butterfly image
    
  

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