Как передвинуть блок в CSS

Для того чтобы передвинуть блок в CSS можно использовать свойство margin или position.

Свойство margin управляет внешними отступами элемента и может использоваться для передвижения блока, если задать отрицательные значения. Например, если нужно передвинуть блок вверх на 20px, то можно задать отступ margin-top: -20px;

Пример:

<div class="box">Передвигаемый блок</div>

<style>
  .box {
    margin-top: -20px;
  }
</style>

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

Пример:

<div class="container">
  <div class="box">Передвигаемый блок</div>
</div>

<style>
  .container {
    position: relative;
    height: 200px;
  }
  .box {
    position: absolute;
    top: -20px;
    left: 50px;
  }
</style>

В этом примере блок с классом .box будет абсолютно позиционирован внутри блока .container и будет передвинут на 20px вверх и на 50px вправо относительно установленного положения.