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

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

1. Position: static (Позиция по умолчанию) — блок всегда отображается в соответствии со стандартным порядком, который определяется потоком элементов на странице. Это значит, что вы не можете управлять положением блока в потоке — он занимает то место, куда его помещает HTML.
2. Position: relative (Относительное позиционирование) — позволяет передвигать блок относительно его исходного положения в нормальном потоке. Для управления положением блока используйте свойства top, right, bottom и left. При этом соседние элементы остаются на своих местах.
3. Position: absolute (Абсолютное позиционирование) — позволяет абсолютно позиционировать блок внутри родительского элемента. Для задания положения блока используйте свойства top, right, bottom и left. При этом соседние элементы могут передвигаться в зависимости от положения абсолютно позиционированного элемента.
4. Position: fixed (Фиксированное позиционирование) — позволяет абсолютно позиционировать блок внутри окна браузера. Такой блок не изменяет свою позицию при скроллинге страницы.

Пример:

<div class="container">
  <div class="box">1</div>
  <div class="box">2</div>
  <div class="box">3</div>
</div>

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

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