Начинающие верстальщики обычно сталкиваются с проблемой позиционирования элементов на веб-странице. Как правило, расставить большие блоки не составляет труда, а вот правильно разместить небольшие кнопки, иконки и прочую оформительскую мелочь может быть затруднительно. Но CSS позиционирование позволяет нам расположить элементы как угодно. Давайте разберемся, как это делать.
Проблема расстановки элементов полностью решается, если раз и навсегда освоить все способы позиционирования элементов. За это отвечает CSS свойство position. У него есть четыре значения и мы рассмотрим каждое из них.
Наверняка вы знаете, что элементы делятся на строчные и блочные. Логично, что строчные элементы могут располагаться на одной строке. Простой пример – тег <a>. На одной строке может быть несколько ссылок. Если мы их никак не разделим, то так и будет. Абсолютно противоположно ведет себя тег абзаца <p>. Если мы разместим на веб-странице два абзаца, они будут отделены друг от друга вертикальными отступами. Два абзаца не могут располагаться на одной строке, даже если они содержат по одному слову. Это поведение всех блочных элементов по умолчанию.
Зачем нужно позиционирование?
Итак, для чего нам вообще позиционирование? Представим себе простенький сайт, который состоит из шапки, контентного блока, сайдбара и футера. Если мы разместим эти блоки и никак не изменим их стандартного блочного поведения, они просто станут вертикально друг за другом. Для шапки и футера это обычное состояние, но вот сайдбар обычно располагается справа или слева от контентного блока. Такое отображение элементов (когда они идут по вертикали сверху вниз в том порядке, в котором они идут в html-коде) называют позиционированием в нормальном потоке. С помощью css-свойства position можно задать еще три способа размещения: абсолютный, относительный и фиксированный.
Абсолютное позиционирование в css
Абсолютное позиционирование означает, что элемент полностью теряет свои блочные свойства. То есть, если мы пропишем его для любого из наших блоков, он как бы выпадет из нормального потока, другие элементы перестанут его замечать.
Соответственно, все элементы, которые были ниже этого блока, подвинутся вверх. Задав абсолютное позиционирование (position: absolute) мы можем двигать элемент с помощью свойств left, right, top, bottom. При этом отсчет будет идти от краев окна браузера. Если элемент вложен в другой родительский блок, то координаты могут отсчитываться от родителя. Для этого ему нужно задать position: relative, а уже нужный дочерний блок позиционировать абсолютно. Например, задав bottom: 0, right: 0, наш элемент станет прижатым к нижнему правому краю. При абсолютном позиционировании можно указывать отрицательные значения координат. Тогда элемент может частично “выпасть” за страничку или вовсе исчезнуть с нее.
Относительное позиционирование
Следующий вариант позиционирования – относительный. Во многом он похож на абсолютный. Для него нужно прописать в нашей таблице стилей position: relative для нужного элемента. После этого мы можем двигать его с помощью тех же свойств, что и при абсолютном позиционировании. Но смещение элемента будет происходить исходя из той точки, где он был изначально. Еще одно важное отличие – такой элемент не выпадает из потока.
Место под него остается, даже если сам элемент будет смещен в другое место. Относительное позиционирование может применяться, когда нужно, чтобы какой-то блок немного наехал на другой, не выпав при этом из нормального потока. Другие блоки не замечают передвижения относительного элемента, для них есть только его исходное положение, в котором он был.
Фиксированное позиционирование
Третье значение свойства position — это fixed. Как вы уже догадались, речь идет о фиксированном позиционировании. На самом деле, это очень удобная вещь. Наверняка на некоторых сайтах вы замечали элементы, которые остаются на странице при ее вертикальной прокрутке? Это может быть какая-то важная информация, которую создатели сайта хотят оставить на видном месте. Для этого такую информацию заключают в блок, которому задают фиксированное позиционирование.
При этом блок будет вести себя так же, как и если бы он был позиционирован абсолютно. Единственное отличие – он будет оставаться на странице на своем месте при ее прокрутке. Элемент постоянно находится в области просмотра, как долго бы вы ни скролили страничку. Простой пример – кнопка “Наверх”, которая есть практически на любом современном сайте. Обычно она появляется, когда вы уже прокутили страницу немного вниз. Далее эта кнопка постоянно остается на своем месте, сколько бы вы ни листали вниз. Это удобно, потому что вы можете пролистать в самый низ, а потом спокойно нажать на кнопку и вернуться наверх за одно мгновение.
Статическое позиционирование
Итак, мы рассмотрели три значения свойства position. Четвертое (static) используется по умолчанию и возвращает элементу обычное блочное поведение. На практике его прописывают редко, но забывать о его существовании все-таки не стоит. Допустим, вы решили делать адаптивный дизайн для своего сайта. К примеру, при максимальной ширине окна в 900 пикселов вы хотите позиционировать меню абсолютно, а при уменьшении ширины окна до 650 пикселов – отменить абсолютное позиционирование и вернуть блок в нормальный поток. Как раз для этого может понадобиться position: static.
В заключении
Итак, мы рассмотрели с вами все четыре значения css-свойства position и для чего они могут понадобиться. Но, как вы могли заметить, ни одно из них не подходит для построения сетки сайта (расстановки основных, крупных блоков). В следующей статье мы как раз поговорим об этом. А если вам нужно позиционировать фоновое изображение, то читайте эту статью, там есть информация об этом.
Ну а если вы хотите хорошо закрепить знания на практике, я рекомендую вам пройти бесплатный курс на эту тему на сайте Html Academy!. Более 100 тысяч человек уже обучаются с помощью этих интерактивных курсов. А у меня на этом все.