верх

Эффект 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>

Отрицательное, нулевое или положительное <length>, представляющее:

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

<percentage>

Процент от высоты содержащего блока.

auto

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

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

inherit

Указывает, что значение совпадает с вычисленным значением от родительского элемента (который может не быть содержащим блоком). Это вычисленное значение затем обрабатывается так, как если бы это было значение <length>, <percentage> или ключевое слово 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  

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