Position Absolute CSS: Принцип работы и примеры

Position absolute в CSS - это один из вариантов свойства position, определяющий позиционирование элемента относительно ближайшего позиционированного (заданного свойством position: relative) или контейнера без позиционирования (обычно это body).

Когда элементу присваивают значение position: absolute, он полностью вырывается из потока документа и его позиция определяется свойствами top, right, bottom и left. Таким образом, элементу с absolute-позиционированием не нужны пространства отступов, доступных остальным элементам.

Вот пример кода для размещения элемента в правом нижнем углу блока:

.container {
  position: relative;
  width: 400px;
  height: 400px;
  border: 1px solid black;
}
.box {
  position: absolute;
  bottom: 0;
  right: 0;
  width: 100px;
  height: 100px;
  background-color: red;
}

  

В этом примере блок .box имеет абсолютную позицию и располагается в правом нижнем углу блока .container. Свойство position задано значение absolute, а для привязки элемента к нижнему и правому краям применены свойства bottom и right.