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 Значение элемента наследуется от родительского элемента.

Поддержка браузера

chrome edge firefox safari opera
1.0+ 12.0+ 1.0+ 1.0+ 6.0+

Практикуйте свои знания

В каких из указанных контекстов может быть использовано CSS свойство 'top'?
Считаете ли это полезным?