Как двигать элементы в css

Аватар пользователя Алексей Алешин
Алексей Алешин
14 марта 2023

Управлять расположением элемента можно с помощью свойства position и следующих четырёх CSS-свойств: top, bottom, left и right.

Свойство position определяет, как элемент будет позиционироваться относительно его родительского контейнера или документа. Если указан relative, то элемент позиционируется относительно своего изначального положения, а финальная позиция определяется при значениями top, left, right, bottom.

Свойства top, bottom, left и right устанавливают расстояние между элементом и его родительским контейнером или документом.

.box {
  position: relative;
  left: 50px;
  top: 50px;
}

.box2 {
  position: absolute;
  right: 0;
  bottom: 0;
}

Тут можно увидеть, что box относительно спозиционирован и сдвинут на 50 пикселей вправо и на 50 пикселей вниз относительно его изначального расположения. Элемент с классом box2 абсолютно спозиционирован в правом нижнем углу его родительского контейнера.

0 0