top

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

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

  • Когда задано position: absolute или fixed — значение свойства top устанавливается как расстояние между верхней гранью элемента и верхней гранью родительского контейнера.
  • Когда задано position: relative — значение свойство top устанавливается как расстояние, на которое смещается верхний край элемента от нормальной позиции.
  • Когда задано position: sticky — свойство top работает так, как при position: relative во время нахождения элемента внутри области просмотра, и как position: fixed вне области просмотра.
  • Когда задано position: static — свойство top не имеет никакого эффекта.

Когда заданы оба свойства top и bottom, а свойство position установлено как absolute или fixed, то оба свойства top и bottom учитываются. Во всех остальных ситуациях, если height как-либо ограничена или position установлено как relative, то свойство top будет учтено, а bottom — проигнорировано.

Синтаксис

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

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

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

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

Значения

<length>
Отрицательная, нулевая или положительная величина, которая представляет:
  • для абсолютно позиционируемых элементов &mdash расстояние от верхнего края содержащего их блока;
  • для относительно позиционируемых элементов &mdash расстояние, на которое элемент смещается вниз, относительно своего положения в нормальном потоке.
<percentage>
Процент от высоты родительского блока.
auto
Это ключевое слово, которое означает:
  • для абсолютно спозиционированных элементов — позиция элемента опирается на свойство bottom, пока height: auto обрабатывается как высота в зависимости от содержимого; если так же и bottom: 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

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

We're converting our compatibility data into a machine-readable JSON format. This compatibility table still uses the old format, because we haven't yet converted the data it contains. Find out how you can help!
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, в то время как заданное для него значение игнорируется.