Евгений Резниченко - Спецификация CSS2

Ссылки в данной спецификации на абсолютно позиционированный элемент (или его бокс) подразумевают, что свойство 'position' элемента имеет значение 'absolute' или 'fixed'.

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

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

[D]

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

Документ с фрэймами в CSS2 BODY { height: 8.5in } /* Необходим далее для процентной высоты */ #header { position: fixed; width: 100%; height: 15%; top: 0; right: 0; bottom: auto; left: 0; } #sidebar { position: fixed; width: 10em; height: auto; top: 15%; right: auto; bottom: 100px; left: 0; } #main { position: fixed; width: auto; height: auto; top: 15%; right: 0; bottom: 100px; left: 10em; } #footer { position: fixed; width: 100%; height: 100px; top: auto; right: 0; bottom: 0; left: 0; }

Три свойства, влияющие на генерацию и структуру бокса -- 'display' , 'position' и 'float -- взаимодействуют так:

1Если 'display' имеет значение 'none', ПА обязаны игнорировать 'position' и 'float . В этом случае элемент не генерирует бокса.

2Иначе, если 'position' имеет значение 'absolute' или 'fixed', 'display' установлен в 'block' , а 'float установлен в 'none'. Позиция бокса будет определяться свойствами 'top' , 'right' , 'bottom' и 'left' и содержащим блоком бокса.

3Иначе, если 'float имеет значение не 'none', 'display' установлен в 'block' , и бокс всплывает.

4Иначе, оставшиеся свойства 'display' применяются так, как специфицированы.

Примечание. CSS2 не специфицирует поведение структуры, если значения этих свойств изменяются скриптами. Например, что произойдёт, если элемент, имеющий 'width: auto' изменит позицию? Будет ли перерисовано содержимое или форматирование останется первоначальным? Ответ находится за пределами данного документа, и похоже, что такое поведение отличалось для ранних реализаций CSS2.

Чтобы проиллюстрировать разницу между нормальным и относительным позиционированием, поплавками и абсолютным позиционированием , мы предлагаем серию примеров на базе следующего фрагмента HTML:

Сравнение схем позиционирования

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

Для этого документа мы принимаем следующие правила:

BODY { display: block; line-height: 200%; width: 400px; height: 400px } P { display: block } SPAN { display: inline }

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

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

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

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

[D]

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

#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 не влияет.

[D]

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

Читать дальше