ЛЕКЦИЯ

Тема: «Позиционирование элементов в CSS»

План лекции

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

2. Нормальное позиционирование

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

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

5. Вложенные слои

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

7. Z-index

8. Управление видимостью и переполнением блоков

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

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

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

Для того, что бы позиционировать какой либо элемент к нему применяют свойство position и одно из его возможных значений:

· absolute - Абсолютное позиционирование элемента.

· relative - Относительное позиционирование элемента.

· fixed - Фиксированное позиционирование элемента.

· static - Статическое позиционирование элемента. (Элемент отображаются как обычно.)

· inherit - Наследует значение элемента родителя.

2. Нормальное позиционирование

Если для элемента свойство position не задано или его значение static, элемент выводится в потоке документа как обычно. Иными словами, элементы отображаются на странице в том порядке, как они идут в исходном коде HTML.

Статическое позиционирование производится по умолчанию, в том случае, если свойство position не указано.

Элемент с position: static ещё называют не позиционированным.

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

Абсолютно позиционированный элемент (position: absolute) выводится из общего потока и, несмотря на другие элементы и их взаимное расположение, занимает указанное место на странице от края/краёв окна браузера. При таком способе позиционирования один элемент может накладываться поверх другого.

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

· bottom - Расстояние от нижнего края окна браузера.

· left - Расстояние от левого края окна браузера.

· right - Расстояние от правого края окна браузера.

· top - Расстояние от верхнего края окна браузера.

Данные расстояния могут быть заданы в пикселях, процентах или любых других принятых единицах измерения CSS, значение по умолчанию - auto.

Для режима характерны следующие особенности.

· Ширина слоя, если она не задана явно, равна ширине контента плюс значения полей, границ и отступов.

· Свойства left и top имеют более высокий приоритет по сравнению с right и bottom. Если left и right противоречат друг другу, то значение right игнорируется. То же самое касается и bottom.

· Если left задать отрицательное значение, то слой уйдёт за левый край браузера, полосы прокрутки при этом не возникнет. Это один из способов спрятать элемент от просмотра. То же относится и к свойству top, только слой уйдёт за верхний край.

· Если left задать значение больше ширины видимой области или указать right с отрицательным значением, появится горизонтальная полоса прокрутки. Подобное правило работает и с top, только речь пойдёт о вертикальной полосе прокрутки.

· Одновременно указанные свойства left и right формируют ширину слоя, но только если width не указано. Стоит добавить свойство width и значение right будет проигнорировано. Аналогично произойдёт и с высотой слоя, только уже участвуют свойства top, bottom и height.

· Элемент с абсолютным позиционированием перемещается вместе с документом при его прокрутке.

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

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

· Координаты top/bottom/left/right для нового местоположения отсчитываются от ближайшего позиционированного родителя, т.е. родителя с позиционированием, отличным от static. Если такого родителя нет – то относительно документа.

Кроме того:

· Ширина элемента с position: absolute устанавливается по содержимому.

· Элемент получает display:block, который перекрывает почти все возможные display.

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

· Иногда бывает нужно поменять элементу position на absolute, но так, чтобы элементы вокруг не сдвигались. Как правило, это делают, меняя соседей – добавляют margin/padding или вставляют в документ пустой элемент с такими же размерами.

· Одновременное указание

· В абсолютно позиционированном элементе можно одновременно задавать противоположные границы (left/right, top/bottom). Браузер растянет такой элемент до границ.

· Если у элемента есть позиционированный предок, то position: absolute работает относительно него, а не относительно документа.

Свойство position со значением absolute можно использовать для создания эффекта фреймов. Кроме абсолютного позиционирования для элементов необходимо назначить свойство overflow со значением auto. Тогда при превышении контентом высоты видимой области появится полоса прокрутки.

Абсолютное позиционирование также применяется для создания различных эффектов, например, всплывающей подсказки к фотографиям. В отличие от атрибута title тега <img>, который также выводит текст подсказки, через стили можно управлять видом текста выводимого с помощью скрипта.

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

Если задать значение relative свойства position, то положение элемента устанавливается относительно его обычного положения. Добавление свойств left, top, right и bottom изменяет позицию элемента и сдвигает его в ту или иную сторону от первоначального расположения. Положительное значение left определяет сдвиг вправо от левой границы элемента, отрицательное — сдвиг влево. Положительное значение top задаёт сдвиг элемента вниз, отрицательное — сдвиг вверх.

При смещении элемента относительно исходного положения, место, которое занимал элемент, остаётся пустым и не заполняется ниже или вышележащими элементами.

Особенности относительного позиционирования:

· Не будут работать одновременно указанные top и bottom, left и right. Нужно использовать только одну границу из каждой пары.

· Возможны отрицательные координаты и координаты, использующие другие единицы измерения. Например, left: 10% сдвинет элемент на 10% его ширины вправо, а left: -10% – влево. При этом часть элемента может оказаться за границей окна:

· Свойства left/top не будут работать для position:static. Если их все же поставить, браузер их проигнорирует. Эти свойства предназначены для работы только с позиционированными элементами.

5. Вложенные слои

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

Отсчёт координат ведётся от внутреннего края границы, значения полей не учитываются.

C помощью вложенных слоев удобно добавлять на страницу к элементу - количество комментариев, ссылки «Добавить комментарий», «Информация об авторе» и «Добавить в избранное».

6. Фиксированное положение

Фиксированное положение слоя задаётся значением fixed свойства position и по своему действию похоже на абсолютное позиционирование, но относительно окна браузера. Но в отличие от него привязывается к указанной свойствами left, top, right и bottom точке на экране и не меняет своего положения при прокрутке веб-страницы. Ещё одна разница от absolute заключается в том, что при выходе фиксированного слоя за пределы видимой области справа или снизу от неё, не возникает полос прокрутки.

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

7. Z-index

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

Свойство z-index позволяет веб-мастеру управлять позициями этих слоёв в глубину экрана (по оси Z), другими словами позволяет указывать браузеру какие элементы следует показывать на переднем плане, а какие на заднем.

Значения свойства z-index:

· auto - Элементы накладываются друг на друга в том порядке, каком они указаны в коде HTML. (по умолчанию).

· целое число - Чем выше данное значение, тем более высокую позицию занимает элемент по отношению к тем элементам, значение которых ниже.

<div align="center" style="position: absolute; z-index:5; width: 350px; height: 100px; top: 120px; left: 0px; color: #0000ff; font-size:100px">z-index</div>

Числовое значение z-index может быть и отрицательным, однако не все браузеры правильно интерпретируют отрицательные значения.

Еще следует отметить, что при равном значении z-index, на переднем плане находится тот элемент, который в коде HTML идет ниже остальных.

Это же правило действует при z-index равным auto или же в том случае если бы данное свойство и вовсе не применялось к тем или иным элементам.

8. Управление видимостью и переполнением блоков

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

Свойство display

— определяет способ отображения элементов страницы:

display: inline → Элементы располагаются на той же строке, последовательно.

Ширина и высота элемента определяются по содержимому. Поменять их нельзя.

Например, инлайновые элементы по умолчанию: <span>, <a>.

Содержимое инлайн-элемента может переноситься на другую строку.

При этом каждая строка в смысле отображения является отдельным прямоугольником («line box»). Так что инлайн-элемент состоит из объединения прямоугольников, но в целом, в отличие от блока, прямоугольником не является.

Это проявляется, например, при назначении фона.

Если инлайн-элемент граничит с блоком, то между ними обязательно будет перенос строки

display: block → Блочные элементы располагаются один над другим, вертикально (если нет особых свойств позиционирования, например float).

Блок стремится расшириться на всю доступную ширину. Можно указать ширину и высоту явно.

Это значение display многие элементы имеют по умолчанию: <div>, заголовок <h1>, параграф <p>.

Блоки прилегают друг к другу вплотную, если у них нет margin.

display: none → Элемент не отображается, Временно удаляется элемент из документа. Занимаемое им место не резервируется и веб-страница формируется так, словно элемента и не было.

display: inline-block → Означает, что элемент, который продолжает находиться в строке (inline), но при этом может иметь важные свойства блока.

Как и инлайн-элемент:

Располагается в строке.

Размер устанавливается по содержимому.

Во всём остальном – это блок, то есть:

Элемент всегда прямоугольный.

Работают свойства width/height.

Это значение display используют, чтобы отобразить в одну строку блочные элементы, в том числе разных размеров.

Свойство vertical-align позволяет выровнять такие элементы внутри внешнего блока.

display: list-item → Аналогично block, Элемент выводится как блочный и добавляется маркер списка.

display: table → Современные браузеры позволяют описывать таблицу любыми элементами, если поставить им соответствующие значения display – для таблицы целиком table, для строки – table-row, для ячейки – table-cell и т.д.

Пример использования:

</div>

<label style="display: table-cell">Фамилия:</label>

</div>

</form>

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

Это хорошо для семантической вёрстки и позволяет избавиться от лишних тегов.

С точки зрения современного CSS, обычные <table>, <tr>, <td> и т.д. – это просто элементы с предопределёнными значениями display:

table { display: table }

tr { display: table-row }

thead { display: table-header-group }

tbody { display: table-row-group }

tfoot { display: table-footer-group }

col { display: table-column }

colgroup { display: table-column-group }

td, th { display: table-cell }

caption { display: table-caption }

Вертикальное центрирование с table-cell

Внутри ячеек свойство vertical-align выравнивает содержимое по вертикали.

CSS не требует, чтобы вокруг table-cell была структура таблицы: table-row и т.п. Может быть одинокий div, это допустимо.

При этом он ведёт себя как ячейка td, то есть подстраивается под размер содержимого и умеет вертикально центрировать его при помощи vertical-align.

Свойство visibility

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

Синтаксис

visibility: visible | hidden | collapse | inherit

Значения

visible

Отображает элемент как видимый.

hidden

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

collapse

Если это значение применяется не к строкам или колонкам таблицы, то результат его использования будет таким же, как hidden. В случае использования collapse для содержимого ячеек таблиц, то они реагируют, словно к ним было добавлено display: none. Иными словами, заданные строки и колонки убираются, а таблица перестраивается по новой. Это значение не поддерживается браузером Internet Explorer.

inherit

Наследует значение родителя.

Свойство “overflow”

Свойство overflow управляет тем, как ведёт себя содержимое блочного элемента, если его размер превышает допустимую длину/ширину.

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

Но что, если высота/ширина указаны явно? Тогда блок не может увеличиться, и содержимое «переполняет» блок. Его отображение в этом случае задаётся свойством overflow.

Возможные значения

visible (по умолчанию)

hidden

scroll

auto

visible

Если не ставить overflow явно или поставить visible, то содержимое отображается за границами блока.

Например:

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

hidden

Переполняющее содержимое не отображается.

Вылезающее за границу содержимое становится недоступно.

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

auto

При переполнении отображается полоса прокрутки.