Как двигать элементы в css
Управлять расположением элемента можно с помощью свойства 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
абсолютно спозиционирован в правом нижнем углу его родительского контейнера.