CSS свойство top

Для HTML элементов с абсолютным позиционированием свойство top определяет расстояние от верхнего края элемента до верхнего края его ближайшего родительского элемента. Если у HTML элемента с абсолютным позиционированием нет позиционирующего родителя, то используется элемент body документа, и такой HTML элемент будет прокручиваться вместе со страницей.

Для HTML элементов с относительным позиционированием свойство top определяет расстояние от верхнего края элемента до его обычной позиции.

Внимание: Если свойство position имеет значение static, то свойство top не будет иметь эффекта.

CSS синтаксис

top: auto | расстояние | initial | inherit;

Возможные значения

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

Пример использования

Устанавливаем верхний край элемента <div> с абсолютным позиционированием на расстояние в 80px от верхнего края его ближайшего родителя.


div.absolute {
    position: absolute;
    top: 80px;
    width: 200px;
    height: 100px;
    border: 3px solid #8AC007;
}