top

Обзор

CSS свойство top частично определяет позицию спозиционированных (свойство position отлично от static) элементов. Оно не повлияет на неспозиционированные элементы.

Для абсолютно спозиционированных элементов (которые с position: absolute или position: fixed), оно определяет расстояние между верхней границей поля элемента и верхней границей родительского блока.

Для относительно спозиционированных элементов (которые с position: relative), оно определяет расстояние, на которое элемент сместится вниз от своего текущего положения.

Когда оба свойства top and bottom определены и свойство height не задано, auto или 100%, оба свойства top и bottom учитываются.Если свойство height задано, свойство top будет учтено, а bottom - проигнорировано.

Начальное значение	`auto`
Применяется к	позиционированные элементы
Наследуется	нет
Проценты	относятся к высоте содержащего блока
Отображение	визуальный
Обработка значения	если указано как длина - абсолютная длина; если указано как проценты - заданное значение; в противном случае `auto`
Animation type	длина, проценты или calc();
Канонический порядок	уникальный неоднозначный порядок, определённый формальной грамматикой

Синтаксис

/* Значения величин */
top: 3px;
top: 2.4em;

/* Процентные значения от высоты родительского блока */
top: 10%;

/* Ключевое слово */
top: auto;

/* Глобальные значения */
top: inherit;
top: initial;
top: unset;

Значения

<length>

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

для абсолютно спозиционированных элементов, расстояние от верхнего края родительского блока;
для относительно спозиционированных элементов, расстояние, на которое элемент смещается вниз, относительно своего положения в нормальном потоке.

<percentage>

Это значение в % от высоты родительского блока, используется, как описано в обзоре.

auto

Это ключевое слово, которое означает:

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

inherit

Это ключевое слово указывает, что значение будет соответствовать вычисленному значению родительского блока (необязательно непосредственного родителя). Вычисленное значение обрабатывается, если это было <length>, <percentage> или auto.

Формальное описание синтаксиса

<length> | <percentage> | auto

Примеры

/* Для body могут быть использованы единицы px, также и для div */
body{
  width: 100%;
  height: 100%;
}

/* div теперь может использовать значения в процентах (body ширина и высота установлены) */
div {
  position: absolute;
  left: 15%;
  top: 30%;
  bottom: 30%;
  width: 70%;
  height: 40%;
  text-align: left;
  border: 3px rgb(0,0,0) solid;
}

 <?xml version="1.0" encoding="utf-8"?>
 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
           "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 <html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
   <head>
     <meta http-equiv="Content-Type" content="application/xhtml+xml" />
     <title>Mozilla.org height top left width percentage CSS</title>
     <style type="text/css">
       /* Для body могут быть использованы единицы px, также и для div */
       body {
         width: 100%;
         height: 100%;
       }
       /* div теперь может использовать значения в процентах (body ширина и высота установлены) */
       div {
         position: absolute;
         left: 15%;
         top: 30%;
         bottom: 30%;
         width: 70%;
         height: 40%;
         text-align: left;
         border: 3px rgb(0,0,0) solid;
       }
     </style>
   </head>
   <body>
      <center>
        <div>
             ...Some content...
        </div>
      </center>

   </body>
 </html>

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

Спецификация	Состояние	Комментарий
CSS Transitions Определение 'top' в этой спецификации.	Рабочий черновик	Определяет `top` как анимируемое
CSS Level 2 (Revision 1) Определение 'top' в этой спецификации.	Рекомендация	Initial definition

Feature	Chrome	Edge	Firefox (Gecko)	Internet Explorer	Opera	Safari
Базовая поддержка	(Да)	(Да)	1.0 (1.7 или ранее)	(Да)^[1]	(Да)	(Да)

Feature	Android	Chrome for Android	Edge	Firefox Mobile (Gecko)	IE Mobile	Opera Mobile	Safari Mobile
Базовая поддержка	?	?	(Да)	?	?^[1]	?	?

[1] В Internet Explorer до версии 7.0, когда оба свойства top и bottom определены, позиция элемента ограничена и свойство top имеет приоритет: вычисленное значение bottom устанавливается как -top, в то время как заданное для него значение игнорируется.