Как поднять элемент вверх css

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

Пример:

.element {
  position: absolute;
  top: 0;
}

Этот код поместит элемент в верхнем левом углу страницы. Также можно использовать другие комбинации значений для свойств top, bottom, left и right, чтобы точно позиционировать элемент вверх на странице.

Также можно использовать свойство z-index для указания слоя элемента на странице. Чем больше значение z-index, тем выше будет элемент на странице.

.element {
  position: relative;
  z-index: 1000;
}

Использование свойств position, top, z-index поможет вам поднять элемент вверх на странице с помощью CSS.

Способ зависит от того, что значит «поднять»: сдвинуть на странице или показать поверх других элементов.

Сдвинуть на несколько пикселей

.badge {
  transform: translateY(-20px);
}

Элемент визуально поднимется, а место под ним останется. Соседи не сдвинутся. transform подходит для анимации: браузер не пересчитывает раскладку страницы.

То же через позиционирование:

.badge {
  position: relative;
  top: -20px;
}

Сдвинуть вместе с тем, что ниже

.card {
  margin-top: -20px;
}

Отрицательный отступ тянет элемент вверх, и всё, что под ним, поднимается тоже. Так карточку накладывают на баннер.

Прижать к верху родителя

<div class="card">
  <span class="label">Новинка</span>
  Текст карточки
</div>

<style>
  .card {
    position: relative;
  }

  .label {
    position: absolute;
    top: 0;
    right: 0;
  }
</style>

absolute отсчитывает координаты от ближайшего родителя с position: relative. Если его нет — от страницы.

Поднять внутри flex-контейнера

Прижать элемент к верху строки:

.row {
  display: flex;
  align-items: flex-start;
}

Поставить элемент первым без правки HTML:

.important {
  order: -1;
}

В колонке (flex-direction: column) элемент с order: -1 окажется сверху.

Показать поверх других элементов

.dropdown {
  position: relative;
  z-index: 10;
}

z-index работает только у позиционированных элементов (relative, absolute, fixed, sticky) и у элементов flex или grid. Если z-index: 9999 не помогает, у родителя создан свой контекст наложения: его создают transform, opacity меньше 1, filter или z-index у самого родителя. Тогда z-index нужно поднимать у родителя.

Закрепить вверху при прокрутке

.header {
  position: sticky;
  top: 0;
}

Позиционирование, flexbox и отступы разбирают в бесплатном курсе «Основы HTML и CSS».