top

Для позиционированного элемента определяет расстояние от верхнего края родительского элемента до верхнего края дочернего элемента. Отсчёт координат зависит от значения свойства position. Если оно равно absolute, в качестве родителя выступает окно браузера и положение элемента определяется от его верхнего края (рис. 1). В случае значения relative, top отсчитывается от верхнего края исходного положения элемента. Если для родительского элемента задано positionrelative, то абсолютное позиционирование дочерних элементов определяет их положение от верхнего края родителя (рис. 2).

Значение top относительно окна браузера

Рис. 1. Значение top относительно окна браузера

Значение top относительно родителя

Рис. 2. Значение top относительно родителя

Краткая информация

Значение по умолчаниюauto
НаследуетсяНет
ПрименяетсяКо всем элементам
АнимируетсяДа

Синтаксис ?

top: <размер> | <проценты> | auto

Обозначения

ОписаниеПример
<тип>Указывает тип значения.<размер>
A && BЗначения должны выводиться в указанном порядке.<размер> && <цвет>
A | BУказывает, что надо выбрать только одно значение из предложенных (A или B).normal | small-caps
A || BКаждое значение может использоваться самостоятельно или совместно с другими в произвольном порядке.width || count
[ ]Группирует значения.[ crop || cross ]
*Повторять ноль или больше раз.[,<время>]*
+Повторять один или больше раз.<число>+
?Указанный тип, слово или группа не является обязательным.inset?
{A, B}Повторять не менее A, но не более B раз.<радиус>{1,4}
#Повторять один или больше раз через запятую.<время>#

Значения

В качестве значений принимаются любые единицы длины, принятые в CSS — например, пиксели (px), дюймы (in), пункты (pt) и др. Значение свойства top может быть и отрицательным, в этом случае возможны наложения разных элементов друг на друга. При задании значения в процентах, положение элемента вычисляется в зависимости от высоты родительского элемента.

auto
Не изменяет положение элемента.

Пример

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>top</title>
  <style>
   .menu { 
    position: absolute; /* Абсолютное позиционирование */
    left: 300px; /* Положение от левого края */
    top: 50px; /* Положение от верхнего края */
    width: 120px; /* Ширина блока */
    background: #e0e0e0; /* Цвет фона */
    border: 1px solid #000; /* Параметры рамки */
    padding: 5px; /* Поля вокруг текста */
   }
   .content { 
    position: absolute; /* Абсолютное позиционирование */
    left: 0; /* Положение от левого края */
    top: 0; /* Положение от верхнего края */
    width: 280px; /* Ширина блока */
    background: #00a5b6; /* Цвет фона */
    color: white; /* Цвет текста */
    padding: 5px; /* Поля вокруг текста */
    padding-right: 60px; /* Отступ справа */
    text-align: justify; /* Выравнивание по ширине */ 
   }
  </style>
 </head>
 <body>
  <div class="content">
   Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed 
   diem nonummy nibh euismod tincidunt ut lacreet dolore magna 
   aliguam erat volutpat. Ut wisis enim ad minim veniam, quis 
   nostrud exerci tution ullamcorper suscipit lobortis nisl ut
   aliquip ex ea commodo consequat. Duis te feugifacilisi.
  </div>
  <div class="menu">
   Ut wisi enim ad minim veniam, quis nostrud exerci taion 
   ullamcorper suscipit lobortis nisl ut aliquip ex en 
   commodo consequat. 
  </div>
 </body>
</html>

Результат данного примера показан на рис. 3.

Применение свойства top

Рис. 2. Применение свойства top

Объектная модель

Объект.style.top

Примечание

В браузере Internet Explorer до версии 7 для абсолютно позиционированных элементов нельзя одновременно задать свойства top, left, right, bottom.

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

СпецификацияСтатус
CSS TransitionsРабочий проект
CSS Level 2 (Revision 1)Рекомендация

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

Каждая спецификация проходит несколько стадий одобрения.

  • Recommendation (Рекомендация) — спецификация одобрена W3C и рекомендована как стандарт.
  • Candidate Recommendation (Возможная рекомендация) — группа, отвечающая за стандарт, удовлетворена, как он соответствует своим целям, но требуется помощь сообщества разработчиков по реализации стандарта.
  • Proposed Recommendation (Предлагаемая рекомендация) — на этом этапе документ представлен на рассмотрение Консультативного совета W3C для окончательного утверждения.
  • Working Draft (Рабочий проект) — более зрелая версия черновика после обсуждения и внесения поправок для рассмотрения сообществом.
  • Editor's draft (Редакторский черновик) — черновая версия стандарта после внесения правок редакторами проекта.
  • Draft (Черновик спецификации) — первая черновая версия стандарта.

Браузеры ?

Браузеры

В таблице браузеров применяются следующие обозначения.

  •  — свойство полностью поддерживается браузером со всеми допустимыми значениями;
  •  — свойство браузером не воспринимается и игнорируется;
  •  — при работе возможно появление различных ошибок, либо свойство поддерживается лишь частично, например, не все допустимые значения действуют или свойство применяется не ко всем элементам, которые указаны в спецификации.

Число указывает версию браузера, начиная с которой свойство поддерживается.

Автор и редакторы

Автор: Влад Мержевич
Последнее изменение: 29.08.2017
Редакторы: Влад Мержевич