top

Общие сведения

Это одно из четырёх свойств смещения в которые также входят right, bottom, и left.

Свойства смещения используются для указания точного положения позиционированного элемента и вообще никак не влияют на не позиционированные (статичные) элементы. Чтобы использовать это свойство, у элемента в свойстве position должно быть установлено значение отличное от static.

Синтаксис свойства

• Синтаксис:

  top: <length> | <percentage> | auto

• Значение по умолчанию: auto
• Применяется: к позиционированным элементам
• Наследуется: нет
• Анимируется: да

Значения свойства

• <length> - смещение задаётся с помощью фиксированной величины. Смотрите тип данных <length> чтобы увидеть полный список возможных значений.
  Разрешено указывать отрицательные значения. Положительные значения смещают элемент вниз от его верхнего края контекста позиционирования, а отрицательные значения смещают элемент вверх.
• <percentage> - смещение задаётся процентами от высоты родительского блока.
• auto - элемент остаётся в своей естественной позиции.

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

Свойство top поддерживается во всех основных браузерах: Chrome, Firefox, Safari, Opera, Internet Explorer и на Android и на iOS.

Примечание

Свойство top также может принимать значение inherit, которое позволяет элементу наследовать верхнее смещение от родительского элемента.

Пример