CSS свойство top

Свойство top указывает смещение элемента от верхнего края элемента в зависимости от свойства position.

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

При позиции "absolute" или "fixed" свойство top указывает смещение верхнего края элемента относительно верхнего края ближайшего родительского элемента.
При позиции "relative" свойство top указывает смещение верхнего края элемента вверх/вниз относительно его текущей позиции.
При позиции "sticky" свойство top изменяет позицию на relative, когда элемент находится внутри окна просмотра, или же позиция устанавливается на fixed, если элемент находится за пределами окна.
При позиции "static" свойство position не применяется.

Отрицательные значения допустимы.

Значение по умолчанию	auto
Применяется	К позиционированным элементам.
Наследуется	Нет
Анимируемое	Да
Версия	CSS2
DOM синтаксис	Object.style.top = "50px";

Синтаксис

top: auto | length | initial | inherit;

Пример

<!DOCTYPE html>
<html>
  <head>
    <title>Заголовок документа</title>
    <style>
      div {
      background-color: #8ebf42;
      height: 200px;
      width: 600px;
      position:relative;
      }
      p {
      color: #eee;
      position: absolute;
      border: 2px solid #666;
      }
      .ex1 {
      top: 0;
      }
      .ex2 {
      top: 50px;
      }
    </style>
  </head>
  <body>
    <h2>Пример свойства top</h2>
    <div>
      <p class="ex1">Какой-нибудь текст (top: 0;)</p>
      <p class="ex2">Lorem Ipsum - это текст-"рыба", часто используемый в печати и вэб-дизайне...(этот текст смещен на 50 px вниз от верхнего края позиционированного элемента)</p>
    </div>
  </body>
</html>

Попробуйте сами!

Пример с отрицательным значением:

Пример

<!DOCTYPE html>
<html>
  <head>
    <title>Заголовок документа</title>
    <style>
      div {
      background-color: #666;
      height: 200px;
      position: relative;
      }
      p {
      color: #fff;
      }
      .top{
      position: absolute;
      top: -35px;
      color: #000000;
      }
    </style>
  </head>
  <body>
    <h2>Пример свойства top</h2>
    <div>
      <p>Некоторый текст</p>
      <p class="top">Текст с использованием свойства top.</p>
    </div>
  </body>
</html>

Попробуйте сами!

Значения

Значение	Описание
auto	Устанавливает позицию верхнего края. Значение по умолчанию.
length	Устанавливает позицию верхнего края в px, cm и т. д. Отрицательные значения допустимы.
%	Устанавливает позицию верхнего края в процентах. Отрицательные значения допустимы.
initial	Устанавливает свойство в значение по умолчанию.
inherit	Значение элемента наследуется от родительского элемента.