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

Что такое позиционирование элементов и зачем оно используется

Когда мы создаем HTML элементы, они располагаются в файле и на странице в браузере в той очередности, в которой мы их написали, согласно следующим базовым правилам:

Блочные элементы занимают всю ширину страницы, и следующие элементы располагаются в следующем ряду (под ними).
Строчные элементы ведут себя как строки текста - занимают ту ширину, которую предполагает контент в них (например в теге <span> - текст в нем).
Элементы выводятся на страницу в том порядке и очередности, в котором они были написаны в HTML документе.

Пример - создадим 2 блока.

Мы создали два блока, и можем увидеть результат в браузере:

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

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

Или какая-либо надпись, размещенная сверху НА фотографии:

Для таких случаев в CSS существует такое понятие, как позиционирование.

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

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

Чтобы начать позиционировать элементы, нужно использовать CSS свойство position.

Когда мы напишем это свойство и дадим ему какое-то значение (далее будет рассказано какие они бывают), по факту мы указываем элементу - мы вырываем тебя из общего потока. И теперь вопрос, а по какой тогда логике располагать элемент, если не по потоковой?

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

Рассмотрим, как это работает.

У свойства position существуют следующие значения:

position: static. Данное значение установлено по умолчанию для любого элемента. Это означает что данный элемент следует обычной логике потока и этот элемент "статически отпозиционирован".
position: relative. Слово relative в данном контексте означает - в зависимости от текущего СВОЕГО местоположения. Если задать элементу с таким свойством свойства top, left, right или bottom, то элемент будет сдвинут относительно того места, где он должен был бы находиться в обычном потоке. При этом элемент остается в потоке, другие элементы "видят" его на том месте, где он должен был бы находиться в обычном потоке. По сути элемент сдвигается, но соседние элементы этого не замечают.
position: absolute. Элемент с таким свойством полностью "выпадает" из текущего потока. На странице он есть, но существует как бы "поверх" всех элементов с статическим позиционированием. Где он будет размещаться в таком случае на странице? Он будет искать ближайшего родителя с нестатическим позиционированием (relative, absolute, fixed). Если такого родителя - нет, то элемент будет позиционироваться относительно окна браузера. Для того, чтобы увидеть как это работает, откройте файл index.html ниже. В нем есть два блока - с классом pos-rel (данный блок имеет position: relative), pos-absolute (с абсолютным позиционированием, он является дочерним для pos-rel). Данный абсолютный блок размещен в правом нижнем углу, с использованием соответствующих свойств. Уберите из класса pos-rel свойство position и посмотрите, что произойдет. Размеры блока будут определяться содержащимся в нем контентом (если вы не зададите их явно с помощью свойств width и height).
```
 <!DOCTYPE html>
 <html lang="en">
 <head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <meta http-equiv="X-UA-Compatible" content="ie=edge">
   <title>Document</title>
   <style>
     .pos-static {
       position: static;
       height: 100px;
       background-color: red;
     }

     .pos-rel {
       position: relative;
       height: 200px;
       background-color: green;
     }

     .pos-absolute {
       position: absolute;
       bottom: 0;
       right: 0;
       height: 150px;
       background-color: yellow;
     }
   </style>
 </head>
 <body>
   <div class="pos-static">Position: static</div>
   <div class="pos-rel">
     <div class="pos-absolute">Position: absolute</div>
   </div>
 </body>
 </html>
```

Как работать со свойствами top, bottom, left, right

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

Чтобы увидеть как это работает, откройте файл index.html выше. Для класса pos-absolute удалите или закомментируйте свойство position: absolute и посмотрите, что произойдет.

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

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

Мы явно задали два свойства - bottom: 20px и right: 100px. Так мы сказали браузеру - размести данный элемент с отступом от нижнего края на 20 пикселей и от правого края - на 100. У нас есть родитель с position: relative, поэтому наш блок будет позиционироваться относительно него. Но на демонстрации блочной модели мы видим не две цифры, а четыре. Это происходит потому, что явно заданные нами свойства браузер учел, но чтобы работать, ему нужно получить все 4 свойства. Поэтому наши явно заданные свойства он учитывает, а остальные высчитывает самостоятельно. Он учитывает высоту и ширину родителя, высоту и ширину нашего абсолютного блока, и получает нужные ему значения.

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

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <style>
    .pos-static {
      position: static;
      height: 100px;
      background-color: red;
    }

    .pos-rel {
      position: relative;
      height: 200px;
      background-color: green;
    }

    .pos-absolute {
      position: absolute;
      bottom: 20px;
      right: 100px;
      height: 150px;
      background-color: yellow;
    }
  </style>
</head>
<body>
  <div class="pos-static">Position: static</div>
  <div class="pos-rel">
    <div class="pos-absolute">Position: absolute</div>
  </div>
</body>
</html>

Пару советов по работе с позиционированием

Не используйте позиционирование для всех нужд в проекте. Большинство задач верстки можно решить, используя обычный поток. Позиционирование нужно для реализации потребностей дизайна, которые трудно или нельзя решить традиционным способом. Примеры корректного использования позиционирования приведены в начале статьи.
Перепроверяйте работу свойства position: fixed в браузере Safari. Есть случаи, когда это свойство работает не совсем так, как ожидается, особенно при работе с модальными окнами.
Существует также новое свойство position: sticky. Его смысл в том, что элемент фиксируется в заданном месте при прокрутке страницы. Данное решение пока что не до конца кроссбраузерное, поэтому при желании его использовать - проверяйте, можете ли вы это делать согласно требованиям вашего проекта по поддержке более старых браузеров.

Полезные ссылки

PreviousТаблицы HTML NextПолное руководство по псевдоклассам и псевдоэлементам

Last updated 4 months ago