Свойство CSS `top`

Свойство top CSS задаёт вертикальное положение позиционированного элемента. Это свойство отступа не действует на непозиционированные элементы.

Попробуйте

top: 0;

top: 4em;

top: 10%;

top: 20px;

<section id="default-example">
  <div class="example-container">
    <div id="example-element">I am absolutely positioned.</div>
    <p>
      As much mud in the streets as if the waters had but newly retired from the
      face of the earth, and it would not be wonderful to meet a Megalosaurus,
      forty feet long or so, waddling like an elephantine lizard up Holborn
      Hill.
    </p>
  </div>
</section>

.example-container {
  border: 0.75em solid;
  padding: 0.75em;
  text-align: left;
  position: relative;
  width: 100%;
  min-height: 200px;
}

#example-element {
  background-color: #264653;
  border: 4px solid #ffb500;
  color: white;
  position: absolute;
  width: 140px;
  height: 60px;
}

Эффект свойства top зависит от способа позиционирования элемента (то есть от значения свойства position):

• Если свойству position задано значение absolute или fixed, свойство top задаёт расстояние между внешним отступом верхнего края элемента и внутренней границей верхнего края содержащего блока или, для элементов с позиционированием относительно якоря, если в значении используется функция anchor(), — относительно указанного края <anchor-side>. Свойство top совместимо со значениями top, bottom, start, end, self-start, self-end, center и <percentage>.
• Если свойству position задано значение relative, свойство top задаёт расстояние, на которое верхний край элемента смещается вниз от своего обычного положения.
• Если свойству position задано значение sticky, свойство top используется для вычисления прямоугольника ограничения прилипания.
• Если свойству position задано значение static, свойство top не действует.

Если заданы значения свойств top и bottom, возможны три случая:

• Если свойству position задано значение absolute или fixed, а height не задано (то есть равно auto или 100%), учитываются оба значения — top и bottom.
• Если свойству position задано значение relative или height ограничено, приоритет имеет свойство top, а свойство bottom игнорируется.
• Если свойству position задано значение sticky, учитываются оба значения — top и bottom. Это означает, что прилипающий элемент может перемещаться вверх и вниз внутри содержащего блока в зависимости от значений этих двух свойств, пока блок позиционирования элемента остаётся внутри содержащего блока.

Синтаксис

/* <length> values */
top: 3px;
top: 2.4em;
top: anchor(bottom);
top: anchor-size(--my-anchor self-block, 10%);

/* <percentage>s of the height of the containing block */
top: 10%;

/* Keyword value */
top: auto;

/* Global values */
top: inherit;
top: initial;
top: revert;
top: revert-layer;
top: unset;

Значения

<length>

Отрицательное, нулевое или положительное значение <length>:

• для абсолютно позиционированных элементов задаёт расстояние до верхнего края содержащего блока;
• для элементов с позиционированием относительно якоря функция anchor() возвращает значение <length> относительно положения верхнего или нижнего края связанного элемента-якоря (см. раздел Использование свойств отступа со значениями функции anchor()), а функция anchor-size() возвращает значение <length> относительно ширины или высоты связанного элемента-якоря (см. раздел Задание положения элемента на основе размера якоря);
• для относительно позиционированных элементов задаёт расстояние, на которое элемент смещается вниз от своего обычного положения.

<percentage>

Процентное значение <percentage> от высоты содержащего блока.

auto

Указывает, что:

• для абсолютно позиционированных элементов положение элемента зависит от свойства bottom, а height: auto считается высотой, определяемой содержимым; если же bottom также равно auto, элемент располагается там, где он находился бы по вертикали, будь он статическим элементом;
• для относительно позиционированных элементов расстояние элемента от его обычного положения зависит от свойства bottom; если же bottom также равно auto, элемент вообще не смещается по вертикали.

Формальное определение

Формальный синтаксис

top = 
  auto |
  <length-percentage> |
  <anchor()> |
  <anchor-size()>

<length-percentage> = 
  <length> |
  <percentage>

<anchor()> = 
  anchor( <anchor-name>? &&
  <anchor-side>, <length-percentage>? )

<anchor-size()> = 
  anchor-size( [ <anchor-name> || <anchor-size> ]? , <length-percentage>? )

<anchor-name> = 
  <dashed-ident>

<anchor-side> = 
  inside |
  outside |
  top |
  left |
  right |
  bottom |
  start |
  end |
  self-start |
  self-end |
  <percentage> |
  center

<anchor-size> = 
  width |
  height |
  block |
  inline |
  self-block |
  self-inline

Примеры

Позиционированный элемент, отступающий на 10% от верхнего края

body {
  background: beige;
}

div {
  position: absolute;
  top: 10%;
  right: 40%;
  bottom: 20%;
  left: 15%;
  background: gold;
  border: 1px solid blue;
}

<div>The size of this content is determined by the position of its edges.</div>

Спецификации

Совместимость с браузерами

См. также

• bottom, left и right
• Сокращённое свойство inset
• inset-block-start, inset-block-end, inset-inline-start и inset-inline-end
• Сокращённые свойства inset-block и inset-inline
• position
• Модуль CSS для позиционированных элементов