Свойство CSS top

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

Браузеры для ПК
Internet Explorer Chrome Opera Safari Firefox Edge
3.0+ 1.0+ 3.5+ 1.0+ 1.0+ 12+
Браузеры для планшетов и мобильных устройств
Android webview Chrome для Android Edge Mobile Firefox для Android Opera для Android iOS Safari Samsung Internet
Да Да Да Да Да Да Да

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

Значение по умолчанию auto
Наследуется Нет
Применяется Ко всем элементам
Аналог HTML Нет
Реализация в javascript
document.getElementById('idElement').style.top = '10px';
в данном случае элементу с id='idElement' будет добавлен стиль
top:10px;
Результат будет следующий, допустим id='idElement' имеет тег div, тогда:
<div id="idElement" style="top:10px;">...</div>
Реализация в jQuery
$('#idElement').css('top','10px');
в данном случае элементу с id='idElement' будет добавлен стиль
top:10px;
Результат будет следующий, допустим id='idElement' имеет тег div, тогда:
<div id="idElement" style="top:10px;">...</div>

Поддерживающие версии CSS

CSS 1 CSS 2 CSS 2.1 CSS 3

Описание

Задает вертикальное положение верхнего края элемента. Положение элемента зависит от значения position самого элемента и его родителя.

1. В случае если у элемента свойство top задано как absolute (абсолютно позиционированных), устанавливает положение верхнего края:

2. В случае если у элемента свойство top задано как fixed (фиксировано позиционированных), устанавливает положение верхнего края до до верхнего края экрана.

3. В случае если у элемента свойство top задано как relative (относительно позиционированных), устанавливает на какое расстояние, элемент перемещается относительно его нормального положения

4. В случае если у элемента свойство top задано как static (статично позиционированных), добавление свойства top ни как не изменяет его положение.

Синтаксис

top: значение | auto | inherit;

Например:

... top: 20px; ...

Значения

значение

Отрицательное, нулевое или положительное значение верхнего края элемента в пикселях или других единицах измерения CSS

inherit Наследует значение родителя.
auto

Положение элемента не изменяется.

Браузер самостоятельно рассчитывает положение верхнего края элемента.

Пример

top:0;
top:60px;
top:30%;
top:7em;

Результат

В этом блоке показан пример использования свойства top:0;.