Позиционирование, плавающее размещение, Z-индекс

Нормальный поток

Порядок отображения элементов на странице называется потоком документа. Блочные элементы отображаются как прямоугольные области, идущие друг за другом сверху вниз, а строчные элементы располагаются сверху вниз и слева направо и при необходимости переносятся на новую строку. Любой элемент, который находится в потоке, занимает на странице свою собственную площадь и может отталкивать от себя соседей с помощью полей.
Откройте простой документ Пример 1, не содержащий таблиц или CSS-позиционорования, измените размеры окна браузера. То, что будет отображаться на экране, — это нормальный поток элементов документа.

Блоки-контейнеры

Блок-контейнер — это любой родительский блок для элемента, который необходимо позиционировать.

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

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

body a1 a11 b1

Позиционирование

Позиционирование — это управление координатами размещения элемента/блока в окне браузера. CSS предлагает для позиционирования свойство position. Для этого свойства могут быть заданы следующие значения:

• absolute (абсолютное позиционирование),
• relative (относительное позиционирование) ,
• fixed (фиксированное позиционирование),
• static (статическое позиционирование, применяется по умолчанию).

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

Для позиционирования блока можно воспользоваться свойствами top, bottom, left, right с определенными значениями.

Абсолютное позиционирование

Абсолютное позиционирование задается стилевым указанием position:absolute.

Абсолютно спозиционированные элементы обладают следующими особенностями:

• Выпадают из потока документа. Место, которое они занимали, становится как бы пустым и его занимают соседние элементы.
• Ширина по умолчанию зависит от содержимого (а не растягивается на всю доступную ширину).
• Остаются на том же месте, где были, если не заданы значения свойств top, left, right, bottom.
• Если свойства left, top, right и bottom заданы, то они задают расположение элемента относительно некоторой системы координат. При этом начало координат находится в верхнем левом углу прямого предка, при условии, что он также позиционирован (абсолютно или относительно). Если родитель не позиционирован, то берется его родитель. Если все предки не имеют указаний position, то в качестве точки отсчета принимается левый верхний угол экранного образа тега BODY, то есть левый верхний угол документа.Элементы выводятся в указанном месте, перекрывая при этом другие элементы страницы. Порядок следования кодов абсолютно позиционируемых элементов становится важным, если они начинают перекрывать друг друга: выше оказывается тот элемент, код которого идет позже.
• Абсолютное позиционирование изменяет поведение не только блочных элементов, но и строчных. Если строчный элемент спозиционирован абсолютно, то он ведет себя точно так же, как и абсолютно спозиционированный блочный. Например, такому строчному элементу можно задавать размеры с помощью width и height.

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

Относительное позиционирование

Относительное позиционирование задается стилевым указанием position:relative. Блоки с относительным позиционированием позиционируются относительно нормального потока, то есть они не выпадают из нормального потока, как блоки с абсолютным позиционированием.

За начало координат принимается та точка, куда элемент был бы размещен без позиционирования. Алгоритм относительного позиционирования можно представить следующим образом: сначала браузер размещает элемент на странице, выполняя обычное форматирование, а затем, по указаниям top, left, right, bottom смещает его на заданные значения.

Откройте Пример 3, измените размер окна и убедитесь, что картинка перемещается по экрану вслед за точкой отсчета — началом абзаца, которому принадлежит тег IMG в коде документа. Начало абзаца меняет свое положение тогда, когда предшествующий заголовок записывается в одну или две экранные строки. Проанализируйте код данной web-страницы.

Фиксированное позиционирование

Фиксированное позиционирование задается стилевым указанием position:fixed. Фиксированное позиционирование позволяет закрепить блок в любом месте страницы. В отличие от абсолютного позиционирования, фиксированные элементы позиционируются только относительно окна браузера.

Откройте Пример 4, прокрутите содержимое страницы, положение навигационного меню должно остаться прежним. Проанализируйте код данной web-страницы.

Z-индекс

Стилевое свойство z-index позволяет отойти от плоского представления документа на экране. Его значением является целое число, номер плоскости, в которой будет размещаться элемент (вместе со своими потомками). Основной текст имеет нулевой уровень (z-index:0). Положительный z-индекс размещает элементы над основным текстом, отрицательный — под ним. Из двух плоскостей размещения та расположена выше, у которой z-индекс больше.

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

Cвойство z-index работает для элементов, у которых position задано как absolute, fixed или relative.

В Примере 5 представлены три блока с абсолютным позиционированием, каждый из которых перекрывает остальные. Проанализируйте код данной web-страницы.

Плавающее размещение

Плавающее размещение задается стилевым указанием float. Свойство определяет, по какой стороне будет выравниваться элемент, при этом остальные элементы будут обтекать его с других сторон. Возможные значения: none — без обтекания; left — выравнивание по левому краю, обтекание по правому краю; right — выравнивание по правому краю, обтекание по левому краю.

В Примере 6 показано плавающее размещение изображения, в результате получен эффект обтекания изображения текстом.

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

В Примере 7 показано очищенное плавающее размещение изображений, таким образом изображения были размещены в два столбца.

Задание

• Используя позиционирование, создайте объемную надпись из обычного текста (без картинок).
• Используя плавающее размещение, измените расположение текста на одной из страниц: выведите текст в три колонки (как в газете). Таблицы при этом не используйте!