Как переместить блок вниз css

Чтобы переместить блок вниз в CSS, можно использовать свойство top.

Пример:

.block {
  position: relative;
  top: 10px;
}

В этом случае блок сместится вниз на 10 пикселей от своего первоначального положения.

Для перемещения блока вниз в CSS можно использовать свойство margin-top. Это свойство задает отступ от верхнего края элемента и позволяет перемещать элемент вниз относительно его первоначальной позиции.

.element {
    margin-top: 20px;
}

Можно задать отрицательное значение для margin-top, чтобы переместить блок вверх. Например, для перемещения блока вниз на 10px:

.element {
    margin-top: -10px;
}

Если нужно переместить блок не только вниз, но и влево или вправо, то можно использовать свойства вместе:

.element {
    margin-top: 20px; /* Перемещение блока вниз на 20px */
    margin-left: 10px; /* Перемещение блока вправо на 10px */
}

Способ зависит от задачи: сдвинуть блок на несколько пикселей, прижать к низу родителя или к низу экрана.

Отступ сверху

.block {
  margin-top: 40px;
}

Блок опустится, и всё, что ниже, сдвинется вместе с ним.

Сдвиг без влияния на соседей

.block {
  position: relative;
  top: 40px;
}

Блок визуально опустится, а место под ним в потоке останется прежним. То же делает transform: translateY(40px) — так удобнее для анимации.

Прижать к низу родителя

Через flex:

.card {
  display: flex;
  flex-direction: column;
  height: 400px;
}

.card .footer {
  margin-top: auto;
}

margin-top: auto забирает всё свободное место над блоком. Так кнопку «Купить» ставят внизу карточек разной высоты.

Через абсолютное позиционирование:

.card {
  position: relative;
}

.card .badge {
  position: absolute;
  bottom: 0;
  left: 0;
}

Подвал внизу страницы

Если контента мало, подвал поднимается к середине экрана. Прижать его к низу:

body {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

main {
  flex: 1;
}

main растянется и вытолкнет подвал вниз.

Закрепить внизу экрана

.cookie-banner {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
}

Блок останется внизу окна при прокрутке. Чтобы он не закрыл контент, добавьте body отступ снизу высотой с блок.

Блок не двигается

• top не работает без position;
• margin-top у первого дочернего элемента может «выпасть» наружу родителя — добавьте родителю padding-top или display: flow-root.

Позиционирование и flexbox разбирают в курсе «Профессиональная вёрстка».