Иногда элемент нужно вынуть из потока и поставить точно в заданное место: бейдж в углу карточки, кнопка «наверх» в углу экрана, крестик закрытия у окна, всплывающая подсказка. Такие элементы не должны толкать соседей и раздвигать раскладку — они «парят» над ней. За это отвечают position: absolute и position: fixed: оба выводят элемент из потока, но отсчитывают положение от разных точек. Освоив их, вы сможете накладывать элементы поверх других и закреплять их на экране.

После этого урока вы сможете точно ставить элемент в любой угол родителя через absolute и закреплять элемент относительно окна браузера через fixed — и наконец разместите бейдж «Хит» на карточке.

Что уже умеем / что добавим

Вы понимаете поток документа и умеете задавать position: relative, в том числе как точку отсчёта. Теперь выведем элементы из потока по-настоящему. В сквозном проекте мы поставим бейдж «Хит» в угол карточки услуги и добавим на страницу кнопку «Наверх», закреплённую в углу экрана.

Что вы узнаете в рамках статьи

• Как position: absolute выводит элемент из потока.
• Относительно чего отсчитывается положение absoluteэлемента.
• Как position: fixed закрепляет элемент в окне браузера.
• Как позиционировать элемент по углам через смещения.

Ключевые термины

• absolute — элемент вне потока, позиционируется относительно ближайшего позиционированного предка.
• fixed — элемент вне потока, позиционируется относительно окна браузера.
• Позиционированный предок — ближайший родитель с position, отличным от static.
• Вне потока — элемент не занимает места, соседи ведут себя так, будто его нет.

Position: absolute — выход из потока

Значение position: absolute полностью выводит элемент из потока: он перестаёт занимать место, и соседи смыкаются, будто его нет. Само положение задаётся смещениями top, right, bottom, left.

.badge {
  position: absolute;
  top: 10px;
  right: 10px;
}

Такой элемент встанет в 10 пикселях от верхнего и правого краёв своей точки отсчёта. В отличие от relative, здесь смещения задают не сдвиг от обычного места, а прямую позицию относительно предка. Элемент как бы прикалывается к указанному месту. А от какого именно предка он считает — определяет следующее важное правило.

Относительно чего считает absolute

absolute-элемент отсчитывает положение от ближайшего предка, у которого position не равен static (то есть relative, absolute, fixed или sticky). Если такого предка нет, точкой отсчёта становится вся страница.

Вот почему в прошлом уроке мы задали карточке position: relative: теперь бейдж внутри неё будет считать координаты от углов карточки, а не от всей страницы.

.card {
  position: relative;
}

.card__badge {
  position: absolute;
  top: 12px;
  right: 12px;
}

Бейдж встанет в правый верхний угол именно карточки. Уберите у карточки relative — и бейдж «убежит» в угол всей страницы, потому что начнёт считать от неё. Связка «relative на родителе + absolute на элементе» — рабочая основа для любых значков и наложений.

Position: fixed — закрепление в окне

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

.to-top {
  position: fixed;
  right: 20px;
  bottom: 20px;
}

Кнопка «Наверх» закрепится в 20 пикселях от правого и нижнего краёв окна и будет висеть там постоянно, пока пользователь листает страницу. fixed идеален для элементов, которые всегда должны быть под рукой: плавающих кнопок, панелей уведомлений, кнопки чата. Главное отличие от absolute — fixed привязан к экрану, а не к родителю, и не реагирует на прокрутку.

Позиционирование по углам

И absolute, и fixed позволяют точно ставить элемент в любой угол или край через комбинацию смещений. Логика простая: указываете, от каких сторон отступить.

/* Правый нижний угол */
.corner {
  position: absolute;
  bottom: 0;
  right: 0;
}

Пара bottom: 0; right: 0 прижмёт элемент к правому нижнему углу точки отсчёта. Аналогично top: 0; left: 0 — левый верхний угол, top: 0; right: 0 — правый верхний. Задавая одновременно противоположные смещения (например, left: 0; right: 0), можно растянуть элемент по ширине. Так, комбинируя смещения, вы точно управляете и положением, и размером вынесенного из потока элемента.

Применяем в проекте

Разместим бейдж «Хит» в углу карточки услуги (карточке мы уже задали relative на прошлом уроке) и добавим на страницу кнопку «Наверх», закреплённую в углу окна.

<article class="card">
  <span class="card__badge">Хит</span>
  <h3>Разработка</h3>
  <p>Создаём сайты под ключ.</p>
</article>

<button class="to-top">Наверх</button>

.card {
  position: relative;
}

.card__badge {
  position: absolute;
  top: 12px;
  right: 12px;
  padding: 4px 10px;
  border-radius: 8px;
  background-color: #e63946;
  color: #fff;
}

.to-top {
  position: fixed;
  right: 20px;
  bottom: 20px;
}

Обновите страницу: бейдж «Хит» аккуратно встал в правый верхний угол карточки и не сдвинул её содержимое, а кнопка «Наверх» закрепилась в углу экрана и остаётся на месте при прокрутке. Оба элемента вне потока — они парят над раскладкой, не влияя на неё. Именно так делают значки и плавающие кнопки в реальных интерфейсах.

Частые ошибки

• Забытый relative на родителе.
  Без позиционированного предка absolute считает от всей страницы, и элемент уезжает не туда.
• Путаница absolute и fixed.
  absolute привязан к предку и прокручивается вместе со страницей, fixed — к окну и остаётся на экране.
• Ожидание, что элемент займёт место.
  Вынесенный из потока элемент не раздвигает соседей; при необходимости оставьте под него отступ.
• Смещения без position.
  top/right работают только когда задан absolute, fixed, relative или sticky, но не при static.

Итоги

Отличная работа — теперь вы умеете выводить элементы из потока и точно их размещать! Вы разобрались, как position: absolute привязывает элемент к позиционированному предку, как fixed закрепляет его в окне браузера, и научились ставить элементы по углам через смещения. Ваша карточка получила эффектный бейдж «Хит», а на странице появилась удобная кнопка «Наверх» — всё это без единого сдвига остальной раскладки.

Прекрасный прогресс! В следующем уроке мы познакомимся с особым, «умным» значением position: sticky — оно позволит шапке прилипать к верху экрана при прокрутке, сочетая лучшее от потока и закрепления.