6. Позиционирование средствами css

Типы позиционирования элементов в CSS и их особенности. Позиционирование на основе плавающих элементов. Приёмы центрирования и наложения элементов

Содержание

Статическое и абсолютное позиционирование

• Основной механизм позиционирования. Нормальный поток.

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

Позиционирование на основе плавающих элементов. Центрирование

• Позиционирование на основе плавающих элементов.

• Центрирование элементов на странице

Относительное и фиксированное позиционирование. Наложение элементов

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

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

• Наложение элементов

Вопросы

CSS предлагает четыре типа позиционирования.

• Абсолютное (position:absolute;). Такое позиционирование позволяет определять расположение элемента, задавая позиции left, right, top или bottom в любых единицах измерения CSS. Кроме того, абсолютно размещенные элементы полностью изъяты из потока страницы, определенного HTML-кодом: остальные элементы на странице размещаются без учёта абсолютно позиционированных элементов.

• Относительное (position:relative;). Элемент с таким позиционированием размещается относительно его текущего положения в потоке HTML. Так, например, устанавливая значение top равным 20 пикселов и значение left равным 200 пикселов для относительно размещенного заголовка, вы переместите его на 20 пикселов вниз и 200 пикселов влево от того места, где он появился бы на странице. В отличие от абсолютного позиционирования, здесь остальные элементы страницы регулируют старое HTML-размещение относительно позиционированного объекта. Соответственно, перемещение объекта с относительным позиционированием оставляет "дыру", на месте которой он должен был находиться. Основная польза относительного позиционирования не в том, чтобы переместить элемент, а в установке новой точки привязки для абсолютно позиционированных элементов, которые вложены в него.

• Фиксированное (position:fixed;). Фиксированный элемент закрепляется в определенном месте на экране. Определение такого позиционирования играет ту же роль, что и установка значения fixed для свойства background-attachment при позиционировании фоновых изображений. Когда посетитель прокручивает страницу, фиксированные элементы остаются на экране как абзацы и заголовки, в то время как фотографии прокручиваются вместе со страницей. Использование фиксированных элементов — отличный способ создать неподвижное боковое меню или воспроизвести эффект HTML-фреймов, где только определенная часть страницы прокручивается.

• Статическое позиционирование соответствует нормальному потоку HTML.

Статическое и абсолютное позиционирование Основной механизм позиционирования. Нормальный поток.

В отсутствие каких-либо дополнительных указаний (в виде правил CSS или атрибутов HTML) браузер размещает содержимое на странице по следующим правилам:

• Ширина блочного элемента равна ширине его контейнера; ширина строчного элемента такова, как требует его содержимое.

• Высота и для блочных, и для строчных элементов равна высоте их содержимого.

• Браузер размещает элементы в их контейнерах слева направо, затем сверху вниз, начиная с контейнера body.

body {

background-image: url(Pos_divs_body.png);

}

div {

color: Blue;

border: solid 1px blue;

margin: 2px;

padding: 4px;

font-size: large;

}

div div {

color: Red;

border: solid 1px red;

}

...

<div>

Это текст в контейнере div - Lorem ipsum...

<div>

Это текст в контейнере div - Lorem ipsum... </div>

Это текст в контейнере div - Lorem ipsum...

</div>

Листинг 6.1. Нормальный поток (html, txt)

Рис. 6.1.  Нормальный поток

Упражнение. Откройте пример в отдельном окне и убедитесь, что все div-контейнеры всегда занимают всю ширину окна, независимо от её величины. Уменьшите ширину контейнеров div (например, width:40%;) и убедитесь, что появившееся пространство остаётся незаполненным.

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

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