Как передвинуть элемент в CSS

Для передвижения элемента в CSS можно использовать свойство position и соответствующие ему значения: static, relative, absolute, fixed.

1. position: static; — элемент располагается в соответствии с обычным потоком документа и не может быть передвинут с помощью свойств top, bottom, left, right.
2. position: relative; — элемент также располагается в соответствии с обычным потоком документа, но может быть передвинут с помощью свойств top, bottom, left, right. При этом, остальные элементы на странице не изменят своего положения.
3. position: absolute; — элемент располагается относительно ближайшего родительского элемента с позиционированием, у которого значение свойства position не равно static. Если такого элемента нет, то относительно самого документа. При этом, элемент выходит из обычного потока документа и может перекрывать другие элементы на странице.
4. position: fixed; — элемент располагается относительно окна браузера и остается на месте при прокрутке страницы. При этом, элемент также выходит из обычного потока документа и может перекрывать другие элементы на странице.

Для передвижения элемента с помощью свойств top, bottom, left, right необходимо указать значение в пикселях или процентах. Например:

.element {
  position: relative;
  top: 20px;
  left: 50px;
}

Этот код переместит элемент на 20 пикселей вниз и на 50 пикселей вправо относительно его изначального положения.