CSS предоставляет возможности по позиционированию элемента, то есть мы можем поместить элемент в определенное место на странице
Основным свойством, которые управляют позиционированием в CSS, является свойство position
. Это свойство может принимать
одно из следующих значений:
static
: стандартное позиционирование элемента, значение по умолчанию
absolute
: элемент позиционируется относительно границ элемента-контейнера, если у того свойство position не равно static
relative
: элемент позиционируется относительно его позиции по умолчанию. Как правило, основная цель
относительного позиционирования заключается не в том, чтобы переместить элемент, а в том, чтобы установить новую точку привязки для
абсолютного позиционированния вложенных в него элементов
fixed
: элемент позиционируется относительно окна бразуера, это позволяет создать фиксированные элементы, которые не
меняют положения при прокрутке
Не следует одновременно применять к элементу свойство float и любой тип позиционирования, кроме static (то есть тип по умолчанию).
Абсолютное позиционирование
Область просмотра браузера имеет верхний, нижний, правый и левый края. Для каждого из этих четырех краев есть соответствующее
свойство CSS: left (отступ от края слева), right (отступ от края справа),
top (отступ от края контейнера сверху) и bottom (отступ снизу). Значения этих свойств указываются в пикселях, em или
процентах. Необязательно задавать значения для всех четырех сторон. Как правило, устанавливают только два значения - отступ от верхнего края top и отступ от
левого края left.
Здесь элемент div с абсолютным позиционированием будет находиться на 100 пикселей слева от границы области просмотра и на 50 снизу.
При этом не столь важно, что после этого элемента div идут какие-то другие элементы. Данный блок div в любом случае будет позиционироваться относительно
границ области просмотра браузера.
Если элемент с абсоютным позиционированием располагается в другом контейнере, у которого в свою очередь значение свойства position
не равно static , то элемент позиционируется относительно границ контейнера:
Позиционирование в HTML5
Относительное позиционирование
Относительное позиционирование также задается с помощью значения relative
. Для указания конкретной позиции,
на которую сдвигается элемент, применяются те же свойства top, left, right, bottom:
Позиционирование в HTML5
Свойство z-index
По умолчанию при совпадении у двух элементов границ, поверх другого отображается тот элемент, который определен в разметке html последним.
Однако свойство z-index
позволяет изменить порядок следования элементов при их наложении. В качестве значения свойство принимает число. Элементы с большим значением этого
свойства будут отображаться поверх элементов с меньшим значением z-index.
Например:
Позиционирование в HTML5
Теперь добавим к стилю блока redBlock новое правило:
Здесь z-index равен 100. Но это необязательно должно быть число 100. Так как у второго блока z-index не определен и фактически равен нулю, то для redBlock мы можем
установить у свойства z-index любое значение больше нуля.
И теперь первый блок будет накладываться на второй, а не наоборот, как было в начале.
Одной из лучших сторон CSS является то, что стили дают нам возможность позиционировать содержимое и элементы на странице практически любым мыслимым образом. Это вносит структурность в наш дизайн и помогает сделать контент более наглядным.
Есть несколько разных типов позиционирования в CSS, каждый из этих типов имеет свою область действия. В этой главе мы собираемся взглянуть на несколько различных случаев применения - создание многократно используемых макетов и уникальное позиционирование одноразовых элементов, а также описание нескольких методов как это сделать.
Позиционирование через float
Один из способов позиционирования элементов на странице - через свойство float
. Это свойство довольно универсально и может применяться разными путями.
По существу, свойство float
берёт элемент, убирает его из обычного потока страницы и позиционирует слева или справа от родительского элемента. Все остальные элементы на странице будут обтекать такой элемент. Например, абзацы будут обтекать изображение, если для элемента
установлено свойство float
.
Когда свойство float
применяется к нескольким элементам одновременно, это даёт возможность создать макет с обтекаемыми элементами расположенными рядом или напротив друг друга, как показано в многоколоночном макете.
Свойство float
принимает несколько значений, два самых популярных - это left
и right
, они позволяют элементу располагаться слева или справа от своего родителя.
Img {
float: left;
}
float на практике
Давайте создадим общий макет страницы с шапкой вверху, двумя колонками в центре и подвалом внизу. В идеале эту страницу следует разметить с помощью элементов
,
,
......
Демонстрация макета без float
Здесь элементы
и
Section {
float: left;
}
aside {
float: right;
}
Для справки, обтекаемые элементы располагаются по краю родительского элемента. Если нет родителя, обтекаемый элемент будет располагаться по краю страницы.
Когда мы устанавливаем элемент обтекаемым, то убираем его из обычного потока HTML-документа. Это приводит к тому, что ширина этого элемента по умолчанию становится шириной его содержимого. Иногда, например, когда мы создаём колонки для многократно используемого макета, такое поведение нежелательно. Это можно исправить путём добавления свойства width
с фиксированным значением для каждой колонки. Кроме того, чтобы обтекаемые элементы не соприкасались друг с другом, в результате чего содержимое одного элемента располагается рядом с другим, мы можем использовать свойство margin
, чтобы установить пространство между элементами.
Ниже мы расширяем предыдущий блок кода, добавив margin
и width
для каждой колонки, чтобы лучше формировать наш желаемый результат.
Для обтекаемого элемента также важно понимать, что элемент удаляется из обычного потока страницы и что у элемента может измениться значение display
, заданное по умолчанию. Свойство float
опирается на то, что у элемента значение display
задано как block
и может изменить значение display
у элемента по умолчанию, если он ещё не отображается как блочный элемент.
Например, элемент, у которого display
указан как inline
, такой как строчный , игнорирует любые свойства height
или width
. Однако, если для строчного элемента указать float
, значение display
изменится на block
и тогда элемент уже может принимать свойства height
или width
.
Когда мы применяем float
для элемента, то должны следить за тем, как это влияет на значение свойства display
.
Для двух колонок вы можете установить float
, для одной колонки как left
, а для другой как right
, но для нескольких колонок нам придётся изменить наш подход. Скажем, к примеру, мы хотели бы получить ряд из трёх колонок между нашими элементами
и
......
...
...
Чтобы расположить эти три элемента
в строку из трёх колонок, мы должны задать float
для всех элементов
как left
. Мы также должны настроить ширину
с учётом дополнительных колонок и расположить их один рядом с другим.
Здесь у нас есть три колонки, все с равной шириной и значением margin
, а также с float
, заданным как left
.
Демонстрация трёхколоночного макета с float
Очистка и содержимое float
Свойство float
было первоначально разработано, чтобы позволить содержимому обтекать вокруг изображений. Для изображения может быть задано float
и всё содержимое вокруг этого изображения, естественно, обтекает вокруг него. Хотя это прекрасно работает для картинок, свойство float
на самом деле не было предназначено для использования в макете и с целью позиционирования и, таким образом, оно идёт с несколькими ловушками.
Одной из этих ловушек является то, что иногда надлежащие стили не отображаются на элементе, который расположен рядом с обтекаемым элементом или является его родителем. Когда элемент установлен обтекаемым, то он убирается из обычного потока страницы и, как результат, стили элементов вокруг этого обтекаемого элемента могут получить негативное влияние.
Часто значения свойств margin
и padding
интерпретируются некорректно, заставляя их сливаться с обтекаемым элементом. Другие свойства также могут быть затронуты.
Другая ошибка состоит в том, что иногда нежелательный контент начинает обтекать элемент с float
. Удаление элемента из потока документа позволяет всем элементам вокруг обтекаемого элемента обходить его и задействовать любое доступное пространство вокруг обтекаемого элемента, что часто бывает нежелательно.
В нашем предыдущем примере с двумя колонками, после того как мы добавили float
к элементам
и
Демонстрация макета без очистки float
Чтобы предотвратить содержимое от обматывания вокруг обтекаемых элементов, нам нужно сделать очистку float
и вернуть страницу в её обычный поток. Мы рассмотрим как очистить float
, а затем взглянем на их содержимое.
Очистка float
Очистка float
происходит с помощью свойства clear
, которое принимает несколько различных значений: наиболее часто используемые значения - left
, right
и both
.
Div {
clear: left;
}
Значение left
очищает левые float
, в то время как значение right
очищает правые float
. Значение both
, однако, очистит левые и правые float
и часто является наиболее идеальным вариантом.
Возвращаясь к нашему предыдущему примеру, если мы используем свойство clear
со значением both
для элемента
Footer {
clear: both;
}
Демонстрация макета с очисткой float
Содержимое float
Вместо очистки float
, ещё одним вариантом является установка содержимого float
. Результат получится почти такой же, однако содержимое float
действительно гарантирует, что все наши стили будут отображаться надлежащим образом.
Чтобы установить содержимое float
, обтекаемые элементы должны находиться внутри родительского элемента, он будет выступать в качестве контейнера, оставляя поток документа полностью обычным за его пределами. В стилях для этого родительского элемента представлен класс group
, как показано здесь:
Здесь немного что происходит, но, по сути, всё что CSS делает - очищает все обтекаемые элементы внутри элемента с классом group
и возвращает документ в обычный поток.
Более конкретно, псевдоэлементы ::before
и ::after
, как указано в уроке 4, динамически генерируют элементы выше и ниже элемента с классом group
. Эти элементы не включают в себя какой-либо контент и отображаются как табличные элементы, подобно элементам блочным. Динамически генерируемый элемент после элемента с классом group
очищает float
внутри элемента с классом group
, так же, как и clear
ранее. И, наконец, элемент с классом group также очищает все float
, которые могут появиться до него на случай, если существует float
со значением left
или right
. Также сюда включена небольшая хитрость, которая заставляет старые браузеры играть красиво.
Здесь больше кода, чем единственная команда clear: both
, но он может оказаться весьма полезным.
Рассматривая наш макет страницы с двумя колонками мы могли бы обернуть
и
Показанная здесь техника известна как «clearfix» и часто встречается на других сайтах с именем класса clearfix или cf. Мы решили использовать имя класса group
, потому что он представляет группу элементов и лучше выражает содержимое.
Когда для элементов задано float
важно следить за тем, как они влияют на поток страницы и убедитесь, что поток страницы сбрасывается путём очистки или через содержимое float, как надо. В противном случае, отслеживание float
может вызвать немало головной боли, особенно на страницах, содержащих несколько строк, в каждой из которых несколько колонок.
На практике
Вернёмся к сайту Styles Conference и опробуем на нём добавление float
к некоторому содержимому.
Перво-наперво, перед применением float
к любому элементу, давайте обеспечим содержимым эти обтекаемые элементы, добавив clearfix в наш CSS. В файле main.css, чуть ниже наших стилей сетки, добавим clearfix под именем класса group
, как и раньше.
/*
========================================
Clearfix
========================================
*/
.group::before,
.group::after {
content: "";
display: table;
}
.group::after {
clear: both;
}
.group {
clear: both;
*zoom: 1;
}
Теперь, когда мы можем использовать float
, давайте зададим его для основного
внутри элемента
как left
и позволим остальному содержимому в заголовке обтекать его справа.
Чтобы сделать это, добавим класс logo
к элементу
. Затем внутри нашего CSS добавим новый раздел стилей для основного заголовка. В этом разделе мы выберем элемент
Пока мы здесь, добавим чуть больше деталей к нашему логотипу. Начнём с размещения элемента
или разрыва строки между словами «Styles» и «Conference», чтобы заставить текст нашего логотипа располагаться на двух строках.
В CSS добавим границу по верху нашего логотипа и небольшой вертикальный padding
, чтобы логотип свободно «дышал».
обтекаемым, то хотим установить содержимое float
. Ближайшим родителем для
является элемент
, поэтому мы добавим к нему класс group
. Это применит к нему стили clearfix, которые мы установили ранее.
...
Элемент
принимает форму, так что давайте взглянем на элемент
В отличие от элемента
, однако, мы не собираемся применять класс непосредственно к обтекаемому элементу. На этот раз мы собираемся добавить класс к родителю обтекаемого элемента и использовать уникальный селектор CSS, чтобы выбрать элемент, а затем задать ему float
.
Начнём с добавления класса primary-footer
к элементу
Теперь, когда класс primary-footer
установлен для элемента
/*
========================================
Основной подвал
========================================
*/
.primary-footer small {
float: left;
}
Для проверки - здесь мы выбираем элемент
, который должен находиться внутри элемента со значением primary-footer
у атрибута class
, такой как наш элемент
Наконец, добавим небольшой padding
сверху и снизу элемента
В дополнение к использованию float
, ещё один способ, которым мы можем позиционировать контент - это применение свойства display
в сочетании со значением inline-block
. Метод с inline-block
, как мы ещё обсудим, в первую очередь полезен для компоновки страниц или для размещения элементов в линию рядом друг с другом.
Напомним, что значение inline-block
для свойства display
отображает элементы в линию и позволяет им принимать все свойства блочной модели, включая height
, width
, padding
, border
и margin
. Применение inline-block
позволяет нам в полной мере воспользоваться блочной моделью, не беспокоясь об очистке каких-либо float
.
inline-block на практике
Давайте взглянем на наш трёхколоночный пример с самого начала. Начнём мы, сохраняя наш HTML таким:
......
...
...
Теперь вместо float
для наших трёх элементов мы изменим у них значение display
на inline-block
, оставляя свойства margin
и width
те, что были ранее. В результате наш CSS будет выглядеть следующим образом:
К сожалению, одного этого кода недостаточно чтобы сделать трюк и последний элемент
выталкивается на новую строку. Помните, поскольку строчно-блочные элементы отображаются на одной линии друг за другом, они включают единое пространство между ними. Когда размер каждого отдельного пространства добавляется к ширине и значению горизонтального margin
всех элементов в строке, общая ширина становится слишком большой, выталкивая последний элемент
на новую строку. Чтобы отобразить все элементы
на одной строке, следует удалить пустое пространство между каждым
.
Демонстрация элементов inline-block с пробелом
Удаление пространства между строчно-блочными элементами
Есть несколько методов, как удалить пространство между строчно-блочными элементами и некоторые из них более сложные, чем другие. Мы собираемся сосредоточиться на двух самых простых методах, каждый из которых происходят внутри HTML.
Первое решение - это поместить каждый новый открывающий тег элемента
в той же строке, что и закрывающий тег предыдущего элемента
. Вместо использования новой строки для каждого элемента мы в итоге начинаем элементы с той же строки. Наш HTML может выглядеть следующим образом:
...
...
...
...
Написание строчно-блочных элементов таким образом гарантирует, что пространства между такими элементами в HTML не существует. Следовательно, пространство и не появится при отображении страницы.
Демонстрация элементов inline-block без пробелов
Ещё один метод для удаления пространства между строчно-блочными элементами состоит в открытии комментария HTML непосредственно после закрывающего тега элемента. Затем закройте комментарий непосредственно перед открывающим тегом следующего элемента. Это позволяет строчно-блочным элементам начинаться и завершаться на отдельных строках в HTML и «закомментирует» любое потенциальное пространство между элементами. В результате код будет выглядеть следующим образом:
...
...
...
...
Ни один из этих вариантов не является совершенным, но они полезны. Я склоняюсь в пользу применения комментариев для лучшей организации, но какой вариант вы выберете полностью зависит от вас.
Создание многократно используемых макетов
При создании сайта всегда лучше написать модульные стили, которые могут быть повторно задействованы в других местах, а многократно используемые макеты находятся в верхней части списка повторно применяемого кода. Макеты могут быть созданы с помощью float
или строчно-блочных элементов, но что работает лучше и почему?
Вопрос что лучше для структуры страницы - обтекаемые или строчно-блочные элементы открыт для обсуждения. Мой подход заключается в использовании строчно-блочных элементов для создания сетки или макета страницы, а затем задействовать float
, когда мне хочется чтобы контент обтекал вокруг данного элемента (для чего float
и были предназначены при работе с изображениями). Вообще, я также считаю, что со строчно-блочными элементами легче работать.
Тем не менее, используйте то, что работает лучше для вас. Если с одним подходом вы знакомы лучше чем с другим, тогда задействуйте его.
В настоящее время в работе появились новые спецификации CSS - в частности, свойства flex- и grid-, которые помогут решить, как лучше всего сверстать страницы. Следите за этими методами, когда они начнут всплывать.
На практике
С твёрдым пониманием многократно используемых макетов, пришло время внедрить один на наш сайт Styles Conference.
Для сайта Styles Conference мы создадим трёхколоночный макет используя строчно-блочные элементы. Мы сделаем это так, чтобы получить три колонки одинаковой ширины или две колонки с общей шириной, разделённой между ними как 2/3 для одной и 1/3 для другой.
Для начала мы создадим классы, определяющие ширину этих колонок. Эти два класса мы назовём col-1-3
для одной трети и col-2-3
для двух третей. В разделе «Сетка» нашего файла main.css перейдём вперед и определим эти классы и соответствующую им ширину.
Мы хотим чтобы обе колонки отображались как строчно-блочные элементы. Нам также надо убедиться, что вертикальное выравнивание у них задано по верхней части каждой колонки.
Давайте создадим два новых селектора, которые совместно будут использовать display
и vertical-align
.
Взгляните на CSS снова. Мы создали два селектора класса col-1-3
и col-2-3
разделённых запятой. Запятая в конце первого селектора означает, что за ней следует другой селектор. После второго селектора идёт открывающая фигурная скобка, которая сообщает что начинается описание стиля. С помощью запятой разделяющей селекторы мы можем привязать один стиль к нескольким селекторам одновременно.
Мы хотим поместить некоторое пространство между колонок, которое поможет разбить содержимое. Это можно сделать, добавив горизонтальный padding
к каждой колонке.
Это хорошо работает, однако, когда две колонки располагаются рядом друг с другом, ширина пространства между ними будет вдвое больше, чем пространство от внешнего края. Чтобы уравновесить это, мы поместим все наши колонки в сетку и добавим к ней тот же padding
.
Давайте воспользуемся классом grid
, чтобы определить нашу сетку, а затем зададим одинаковый горизонтальный padding
для классов grid
, col-1-3
и col-2-3
. С запятыми, снова разделяющих наши селекторы, наш CSS выглядит следующим образом:
Когда мы устанавливаем горизонтальный padding
, нам нужно быть осторожными. Помните, в прошлом уроке мы создали контейнер с классом container
по центру всего нашего контента на странице с шириной 960 пикселей. В данный момент, если бы мы поставили элемент с классом grid
внутрь элемента с классом container
, то их горизонтальные padding
сложились бы вместе и наши колонки не будут отображаться пропорционально ширине остальной части страницы.
Мы осуществим это, разбивая набор старых правил container
на следующее:
Теперь любой элемент с классом container
или grid
будет 960 пикселей в ширину и располагаться по центру страницы. Кроме того, мы сохранили существующий горизонтальный padding
для любого элемента с классом container
путём перемещения его в новый, отдельный набор правил.
Хорошо, всю тяжёлую необходимую часть по настройке сетки завершили. Теперь пришло время для работы с нашим HTML и просмотра, как эти классы действуют.
Мы начнём с тизеров на главной странице, в файле index.html, выровняв их по трём колонкам. В настоящее время тизеры обёрнуты элементом
с классом container
. Мы хотим изменить класс container
на grid
так, чтобы внутри мы могли начать размещение колонок.
...
...
...
...
И, наконец, поскольку каждая наша колонка является строчно-блочным элементом, нам следует убедиться что мы удалили пустое пространство между ними. Чтобы сделать это мы воспользуемся комментариями и добавим немного документации к каждому разделу, чтобы лучше организовать свой код.
...
...
...
Для проверки - в строке 3 мы оставили комментарий, идентифицирующий раздел «Спикеры», который за ним следует. В конце строки 7 мы открываем комментарий сразу после закрывающего тега
. Внутри этого комментария, в строке 9 мы определяем следующий раздел «Расписание». Затем закрываем комментарий в начале строки 11, сразу перед открывающим тегом
. Аналогичная структура комментариев появляется в строках с 13 до 17 между двумя элементами
, прямо перед разделом «Место проведения». В целом, мы закомментировали любое потенциальное пустое пространство между колонок, одновременно используя те же комментарии для идентификации наших разделов.
Теперь у нас есть повторно используемая трёхколоночная сетка, которая поддерживает разные расстановки, с использованием ширины колонок как 1/3 и 2/3. Наша главная страница теперь содержит три колонки, разделяя все тизеры.
Рис. 5.02. Главная страница Styles Conference теперь включает трёхколоночный макет
Демонстрация и исходный код
Ниже вы можете просмотреть сайт Styles Conference в его нынешнем состоянии, а также скачать исходный код сайта на данный момент.
Уникальное позиционирование элементов
Рано или поздно каждый пожелает точно позиционировать элемент, но float
или строчно-блочные элементы не позволяют проделать такой трюк. Обтекаемые элементы, которые удаляют элемент из потока страницы, часто приводят к нежелательным результатам, поскольку окружающие элементы обтекают вокруг элемента с float
. Строчно-блочные элементы, если только мы не создаём колонки, могут быть довольно неудобны, когда дело касается правильного положения. Для подобных ситуаций мы можем использовать свойство position
в сочетании со свойствами смещения блока.
Свойство position
определяет, как элемент позиционируется на странице и будет ли он отображаться в обычном потоке документа. Оно применяется в сочетании со свойствами смещения блока - top
, right
, bottom
и left
, которые точно определяют, где элемент будет расположен путём перемещения элемента в разных направлениях.
По умолчанию у каждого элемента значение position
установлено как static
, это означает, что элемент существует в обычном потоке документа и не принимает какие-либо свойства для его смещения. Значение static
наиболее часто переписывается значением relative
или absolute
, которые мы рассмотрим дальше.
Относительное позиционирование
Значение relative
для свойства position позволяет элементам отображаться в обычном потоке страницы, резервируя место для элемента как предполагалось и не позволяя другим элементам его обтекать. Однако, оно также позволяет модифицировать положение элемента с помощью свойств смещения. К примеру, рассмотрим следующие HTML и CSS:
с классом offset
задано значение position
как relative
, а также два свойства смещения - left
и top
. Это сохраняет исходное положение элемента и другим элементам не разрешено двигаться в эту область. Кроме того, свойства смещения перемещают элемент, выталкивая его на 20 пикселей от левого и на 20 пикселей от верхнего исходного местоположения.
Для относительно позиционированных элементов важно знать, что свойства смещения блока определяют, куда элемент будет перемещён, учитывая его исходное положение. Таким образом, свойство left
со значением 20 пикселей фактически толкает элемент вправо на 20 пикселей. Свойство top
со значением 20 пикселей затем будет толкать элемент вниз на 20 пикселей.
Когда мы позиционируем элемент с помощью свойств смещения, элемент перекрывает элемент под ним, а не сдвигает его вниз, как это делают свойства margin
или padding
.
Абсолютное позиционирование
Значение absolute
для свойства position
отличается от значения relative
тем, что элемент с абсолютным позиционированием не появляется в обычном потоке документа, исходное пространство и положение абсолютно позиционируемого элемента не резервируется.
Кроме того, абсолютно позиционируемые элементы перемещаются относительно их ближайшего относительно позиционированного родительского элемента. Если относительно позиционированного родителя не существует, то абсолютно позиционированный элемент будет позиционироваться относительно элемента
. Это небольшая часть информации; давайте взглянем на то, как это работает внутри некоторого кода:
В этом примере элемент
позиционируется относительно, но не включает каких-либо свойств смещения. Следовательно, его положение не меняется. Элемент
с классом offset
включает значение position
как absolute
. Поскольку элемент
является ближайшим относительно позиционированным родительским элементом для
, то элемент
будет позиционироваться относительно элемента
.
Для относительно позиционированных элементов свойства смещения определяют, в каком направлении элемент будет перемещён относительного самого себя. Для абсолютно позиционируемых элементов свойства смещения определяют, в каком направлении элемент будет перемещён относительно его ближайшего относительно позиционированного родителя.
В результате свойств right
и top
, элемент
появится в 20 пикселях справа и 20 пикселях сверху внутри
.
Поскольку элемент
позиционируются абсолютно, он не располагается в обычном потоке страницы и будет перекрывать любые окружающие его элементы. Кроме того, исходное положение
не сохраняется и другие элементы могут занять это место. Как правило, большая часть позиционирования может происходить без применения свойств position и свойств смещения, но в некоторых случаях они могут оказаться чрезвычайно полезны.
Резюме
Изучение позиционирования содержимого в HTML и CSS является огромным шагом в сторону освоения этих языков. Добавьте к этому блочную модель и вот мы уверенно движемся по пути превращения во фронтенд-разработчиков.
От автора:
приветствую вас. Позиционирование css элементов является очень важной темой в сайтостроении. В этой статье я предлагаю рассмотреть его подробнее, все способы перемещения блоков по веб-странице.
Какие бывают виды
Если говорить о позиционировании блочных элементов, то оно задается с помощью свойства position. У него есть четыре значения и каждое заслуживает отдельного рассмотрения.
Абсолютное позиционирование
Это первый из известных видов. Задается так: position: absolute. После этого блок теряет свои привычные свойства и полностью выпадает из нормального потока. Что представляет собой этот поток? Попробуйте поставить в разметке несколько блочных элементов подряд. Как они станут? Друг за другом, и ни как иначе.
Это нормальное поведение блоков по умолчанию. А что же происходит с блоком, которому определено абсолютное позиционирование? Он полностью выпадает из нормального потока, другие блоки просто перестают замечать его, словно его никогда не было, но при этом элемент остается на странице. Абсолютное позиционирование в css часто применяется для точной расстановки декоративных элементов, иконок и прочего оформительского добра.
Теперь его можно перемещать с помощью свойств left, right, top и bottom. По умолчанию перемещение происходит относительно краев окна браузера, но если у родительского элемента задано position: relative, то смещение происходит относительно родительского блока.
Block{
position: absolute;
bottom: 0;
right: 0;
}
Block
{
position
:
absolute
;
bottom
:
0
;
right
:
0
;
Элемент будет сдвинут в нижний правый угол. Я замечаю, что часто так делают кнопку наверх – просто размещают ее абсолютно в самый угол. А вот другой пример, в котором я покажу сначала возможную разметку:
В этом примере мы сначала родительскому контейнеру записали относительное позиционирование (relative – о нем дальше в статье), а потом для того же элемента.block задали абсолютное. В результате отсчет координат будет происходить не от самого окна браузера, а от краев элемента родителя, то есть блока wrapper.
Относительное позиционирование css-элементов
Это следующий вид и он записывается так – position: relative. Координаты задаются такими же свойствами, как и при абсолютном положении. Единственное существенное отличие заключается в том, что элемент формально не выпадает из потока – под него остается место.
Работу этого значения можно сравнить с visibility: hidden, когда элемент скрывается со страницы, но место под него остается нетронутым. Такое же происходит и при относительном размещении – блок можно двигать куда угодно, но место под него остается пустым и его не займут другие части.
Еще важно знать, что смещение происходит не от краев окна веб-обозревателя, а от того места, где изначально стоял блок. То есть:
Блок подвинется на 50 пикселей вправо и на 10 влево.
Фиксация
Наверняка в интернете вы не раз видели на сайтах, когда при прокрутке какой-нибудь баннер не исчезал, а продолжал находиться в вашей зоне видимости, словно приклеиваясь к одному месту. В основном это реализуется с помощью фиксированного позиционирования. Для этого нужно записать:
Position:static или обычное статическое положение
Последний вид – статический, это обычное поведение блочный элементов. Его не нужно прописывать, потому что оно стоит по умолчанию, но все-таки знать о четвертом значении нужно. Иногда с position: static записывают, чтобы отменить другой вид позиционирования при определенных событиях на веб-странице.
Как сделать позиционирование блоков в css правильно?
Значения то мы с вами рассмотрели, но этого мало, для того чтобы закрыть для себя эту тему. Собственно, нужно понять, где и какие виды позиционирования нужно применять. С фиксированным я вам уже привел пример – его можно использовать для создания прилипающих боковых колонок, шапок или подвалов.
Относительное позиционирование поможет, когда нужно немного сместить блок относительно его положения и при этом сохранить ему место в потоке. Также его задают блокам-родителям, чтобы использовать абсолютное перемещение для дочерних элементов.
Другие приемы: центровка, плавающие блоки
Свойство position не решает всех проблем с расстановкой блочных элементов. Как бы вы, например, создали сетку сайта с его помощью? У меня нет хороших идей. Тут на помощь приходят другие свойства.
С помощью float в css часто делают сетки. Свойство позволяет прижать блок к левому или правому краю родителя (float: left, float: right), давая возможность нескольким блочным элементам стать в одну линию, что встречается сплошь и рядом на любых сайтах.
Центровка делается так: блоку нужно записать определенную ширину, после чего задать свойство margin: 0 auto. Именно значение auto выровняет его по горизонтали точно по центру. Естественно, для этого он должен быть единственным в своей строке, иначе ничего не получится.
Все перечисленные в этой статьи виды позиционирования могут пригодиться веб-разработчику. Где-то иконку нужно вставить (position: absolute), где-то, чуть-чуть подправить положение блока, оставив за ним место (position: relative), а где и виджет зафиксировать (position: fixed). В общем, знание этого свойства точно лишним не будет.
Ну а чтобы узнавать еще больше из мира сайтостроения, обязательно подписывайтесь на наш блог и получайте новые обучающие материалы. А еще я советую вам глянуть наши , где тоже поднимается подобная тема. (позиционирование элементов)
При создании HTML-страницы элементы позиционируются согласно положению их кода в общем коде страницы. Говоря другими словами, если код блока помещен внутрь кода ячейки таблицы, то и на странице этот блок будет внутри этой ячейки. При таком положении дел невозможно представить, как, допустим, частично наложить один элемент на другой. Однако, это возможно при помощи абсолютного позиционирования элементов
. При этом положение элемента определяется не положением его HTML-кода в исходном коде страницы, а его координатами, заданными с помощью CSS-стилей left и top.
Началом координат является левый верхний угол страницы, координаты элемента определяются левым верхним углом элемента. То есть, если у элемента параметры абсолютного позиционирования:
top
:
200px
;
left
:
300px
;
то расстояние его верхнего края до верхней границы страницы равно 200 пикселей, а расстояние левого края до левой границы страницы - 300 пикселей:
Помимо стилей left и top, элементу необходимо также задать стиль position
со значением absolute
, указывая, что мы хотим применить абсолютное позиционирование. Есть еще один полезный стиль z-index
, который позволяет настроить перекрытие элементов при наложении. Элемент с абсолютным позиционированием накрывает все элементы с относительным позиционированием. Если два элемента с абсолютным позиционированием наложены друг на друга, то на передний план выталкивается тот элемент, у которого больше значение стиля z-index.
Рассмотрим пример. Есть каркас страницы на XHTML 1.0 Transitional:
<html
xmlns=
>
<head
>
<title
>
Главная страница</
title
>
<meta
http-equiv
=
"Content-Type"
content
=
"text/html;charset=utf-8"
/
>
</
head
>
<body
>
</
body
>
</
html
>
Разместим в ней красный квадратный блок с абсолютным позиционированием с координатами (50; 50):
<html
xmlns=
"http://www.w3.org/1999/xhtml"
>
<head
>
<title
>
Page</
title
>
<meta
http-equiv
=
"Content-Type"
content
=
"text/html;charset=utf-8"
/
>
<style
type
=
"text/css"
>
#layer1 {width: 150px; height: 150px; background: #f00; position: absolute; left: 50px; top: 50px;}
</
style
>
</
head
>
<body
>
<div
id
=
"layer1"
>
div
>
</
body
>
</
html
>
Аналогично добавим зеленый и синий блок, а также сделаем так, чтобы зеленый блок перекрывал и синий, и красный, указав ему самое большее значение стиля z-index:
<html
xmlns=
"http://www.w3.org/1999/xhtml"
>
<head
>
<title
>
Page</
title
>
<meta
http-equiv
=
"Content-Type"
content
=
"text/html;charset=utf-8"
/
>
<style
type
=
"text/css"
>
#layer1 {width: 150px; height: 150px; background: #f00; position: absolute; left: 50px; top: 50px; z-index: 20;}
#layer2 {width: 150px; height: 150px; background: #0f0; position: absolute; left: 100px; top: 100px; z-index: 40;}
#layer3 {width: 150px; height: 150px; background: #00f; position: absolute; left: 150px; top: 150px; z-index: 30;}
</
style
>
</
head
>
<body
>
<div
id
=
"layer1"
>
div
>
<div
id
=
"layer2"
>
div
>
<div
id
=
"layer3"
>
div
>
</
body
>
</
html
>
Результат:
В основном, абсолютное позиционирование применяется при создании различных плавающих панелей: форм, меню, баннеров, окон уведомлений, увеличенных изображений и т.п. Некоторые начинающие веб-мастера пытаются с помощью абсолютного позиционирования разместить основные элементы сайта, например, прижать к нижнему краю подвал страниц. Хотя это иногда и практикуется, но сопровождается большим количеством потенциальных трудностей, поэтому я делать этого не рекомендую.
Чаще всего элементы с абсолютным позиционированием связанны с какими-то действиями, появляются и скрываются динамически. Чуть позже вы узнаете, как добавить интерактивности вашим страницам.
Позиционирование в CSS кажется довольно простым. Указываете какой блок и где должен находиться. Однако всё не так просто, как кажется на первый взгляд. Есть несколько моментов, которые могут запутать новичков. Вы сможете извлечь из позиционирования гораздо больше пользы, если детально разберётесь как оно работает.
Box-модель в CSS и типы позиционирования.
Прежде чем приступить, советую вам прочитать статью Box-модель в CSS . В двух словах: каждый элемент в html - это прямоугольник, для которого можно указать величины внутренних и внешних отступов, а также границу, которая разделяет их.
Схемы позиционирования определяют где должен располагаться этот прямоугольник, а также как он должен влиять на элементы вокруг себя.
Свойство position в CSS может принимать пять значений:
absolute
relative
fixed
static
inherit
Значение static используется по умолчанию. Любой элемент с позиционированием static находится в общем потоке документа. Правила для его размещения определяются Box-моделью. Для таких элементов, свойства top , right , bottom и left будут игнорироваться. Для того, чтобы использовать эти свойства, позиционирование элемента должно быть абсолютным (absolute), относительным (relative) или фиксированным (fixed).
Значение inherit , как и во всех остальных свойствах CSS, используется для того, чтобы элемент использовал тоже самое значение, что и родительский элемент.
Абсолютное позиционирование
Абсолютное позиционирование удаляет элемент из общего потока документа. Что касается элементов вокруг, то в этом случае они просто игнорируют искомый, как будто ему установлено свойство display: none; . Если вы не хотите чтобы пространство для такого элемента заполнялось другими элементами, то вам надо придумать другой подход.
Вы устанавливаете расположение элемента с абсолютным позиционированием, используя свойства top , left , right и bottom . Вам достаточно указать два из них, top или bottom и left или right. Если ни одного свойства не указано, то устанавливается 0 для пары top-left.
Ключевой момент в абсолютном позиционировании - это понимание того, что является точкой отсчёта. Если свойству top указано значение 20px, то откуда их необходимо отсчитывать.
Ответ прост: такие элементы позиционируются относительно ближайшего родительского элемента, для которого задано позиционирование отличное от static . Если такого элемента нет, то элемент позиционируется относительно основного документа. То есть при установки абсолютного позиционирования, CSS сообщает браузеру, чтобы он посмотрел на родительский элемент и, если его позиционирование не статическое, то надо выровнять текущий элемент относительно него.
Относительное позиционирование.
Относительно позиционированные элементы, размещаются на основе своей же позиции, обычный сдвиг относительно своего нормального расположения. Это похоже на то, как если бы вы добавили элементу внешние отступы с помощью свойства margin . Однако есть одно существенное различие: соседние элементы, в случае использования позиционирования, не учитывают этот сдвиг.
Представьте себе это так: некое изображение сдвигается, а на его месте остаётся "призрак", все элементы располагаются относительно этого "призрака". Это позволяет нам накладывать элементы друг на друга.
Таким образом, элементы с относительным позиционированием, взяты из нормального потока элемента, но по-прежнему оказывают влияние на расположение соседних элементов, которые ведут себя так, что исходный элемент всё ещё находится в потоке документа.
В этом случае мы не должны задавать вопрос относительно чего здесь позиционируется элемент. Ответ всегда: нормальный поток документа. Очень похоже на то, что вы добавили внешний отступ к элементу, но в то же время не повлияли на соседние элементы.
Фиксированное позиционирование
Фиксированное позиционирование действует подобно абсолютному, с небольшими различиями.
Во-первых, элемент с фиксированным позиционированием всегда располагается относительно окна браузера, родительские элементы при этом игнорируются.
Второе отличие исходит из его названия. Фиксированные элементы зафиксированы на странице. Они не смещаются при её прокручивании.
Z-index
Страница сайта двумерна. У неё есть ширина и высота. Z-index добавляет третье измерение, глубину.
Чем выше этот индекс тем выше на странице расположен элемент. С помощью него мы можем добиться чтобы один элемент располагался поверх другого. По умолчанию, его значение - ноль. Отрицательные значения также допустимы.
На самом деле, z-index гораздо сложнее, чем я его здесь описываю, но это тема для отдельной статьи. Сейчас, главное запомнить саму идею третьего измерения и то, что только позиционируемые элементы могут использовать это свойство.
Проблемы позиционирования.
Рассмотрим несколько общих проблем, связанных с позиционированием, а также несколько слов об их решении.
Вы не можете одновременно использовать свойство position и свойство float для одного и того же элемента.
Оба эти свойства влияют на позицию элемента, поэтому использоваться будет свойство, указанное последним.
Из комментариев:
Одновременно можно использовать position:relative и float.
Когда одновременно указывается position:absolute и float, то применяется не последнее указанное свойство. В этом случае, независимо от порядка следования этих стилей, применяется position:absolute, а итоговое (или вычисленное) значение свойства float устанавливается в none, независимо от начального значения, т.е. игнорируется.
Внешние отступы не "схлопываются" у элементов с абсолютным позиционированием.
Допустим на странице есть параграф с нижним отступом в 20px. Следом за ним размещается картинка с верхним полем 30px. Расстояние между картинкой и текстом будет не 50px (20px + 30px), а 30px (30px > 20px). Такое поведение называется collapsing margins . Два отступа комбинируются в один. У элементов с абсолютным позиционированием нет полей для "схлопывания", поэтому результат может отличаться от ожидаемого.
IE и z-index.
В IE6 выбор элемент происходит всегда на вершине стека, независимо от его z-index -а, z-index -ов окружающих элементов.
В IE6 и IE7 есть ещё одна проблема с z-index -ом. IE смотрит на родительский элемент для определения в какой группе элементов находится вершина стека, остальные браузеры используют глобальный контекст. Например:
Мы ожидаем, что параграф будет находиться выше, чем изображение, поскольку его z-index больше. Однако IE6 и IE7 располагают выше картинку, поскольку они находятся в разных стеках документа. Один стек для div , второй для img , а у картинки z-index выше, чем у div -а.
Заключение
Свойство position устанавливает поведение расположения элемента в соответствии с одной из схем позиционирования. Доступные значения свойства: absolute , relative , fixed , static (по умолчанию) и inherit .
Схемы позиционирования определяют правила размещения элемента на web-странице, а также влияние на расположение соседних элементов.
Свойство z-index может быть применено только для элементов с установленным свойством position . Оно добавляет третье измерение на странице и устанавливает порядок стека элементов.
Свойство position кажется лёгким для восприятия, но работает немного иначе, чем кажется с первого взгляда. Зачастую разработчики думают что им необходимо относительное позиционирование, хотя скорее всего надо использовать абсолютное. В основном при вёрстке используется свойство float , а свойство position необходимо для элементов, которые вы хотите "вырвать" из общего потока документа.