Смещение элемента от верхнего края: top

top

Поддержка браузерами
Настольные браузеры Chrome Firefox Internet Explorer Opera Safari
Базовая поддержка, версии браузеров 1.0 1.0 6.0 6.0 1.0
Свойство
top — это свойство позволяет определить смещение элемента от верхнего края
Описание
Это свойство работает в совокупности со свойством position. Значение свойства position определяет откуда будет происходить смещение, если указано значение relative, то смещение будет происходить от верхнего края элемента; если стоит значение absolute, то нужно смотреть на "предков" позиционируемого элемента, если они позиционированы как relative, absolute или fixed, то смещение будет относительно этих элементов, если же нет позиционированных предков, то смещение будет происходить относительно окна браузера; если стоит значение fixed, то смещение будет от верхнего края окна браузера
Наследование
Не наследуется. Это значит что стили применённые к родительскому элементу не передадутся потомкам
Применяется
К тем элементам которые имеют значения absolute, relative или fixed свойства position
Может принимать значения
значение в абсолютных единицах | значение в относительных единицах | auto | inherit
Значение по умолчанию
auto
Правила записи
свойство: значение;
Примеры

В этом абзаце position: absolute; top: auto; смещение будет рассчитано автоматически


В данном примере при значении absolute свойства position и при значении auto свойства top элемент удаляется со своего места, пространство которое он занимал не сохраняется, происходит наложение элемента на текст

В этом абзаце position: relative; top: 1em будет смещение от верхнего края элемента на величину 1em


Нужно обратить внимание что при значении relative свойства position место которое занимал элемент сохраняется

В этом абзаце position: absolute; top: 60%; будет смещение от верхнего края окна браузера на величину 60%


Нужно обратить внимание что при значении absolute свойства position место которое занимал элемент не сохраняется и в данном случае он позиционируется относительно верхнего края окна браузера

В этом абзаце position:fixed; top: 350px; будет смещение от верхнего края окна браузера на величину 350px


Нужно обратить внимание что при значении fixed свойства position место которое занимал элемент не сохраняется, он позиционируется относительно окна браузера и остается в этой позиции при прокрутке страницы

Это значит что свойство унаследует значение от родителя

Поделиться