top
Поддержка браузерами
| 12.0+ | 5.0+ | 1.0+ | 1.0+ | 6.0+ | 1.0+ |
Описание
CSS свойство top указывает смещение позиционированного элемента относительно верхнего края. Как именно свойство top будет смещать элемент, зависит от конкретного значения свойства position:
- Элемент с фиксированным позиционированием (position: fixed;) смещается вверх/вниз относительно верхнего края окна браузера.
- Элемент с абсолютным позиционированием (position: absolute;) смещается вверх/вниз относительно верхнего края его первого позиционированного (не static) элемента предка. Если у элемента нет предка с позиционированием (relative, absolute или fixed), тогда он будет смещаться относительно верхнего края окна браузера.
- Элемент с относительным позиционированием (position: relative;) смещается вверх/вниз относительно верхнего края его текущей позиции.
- Для элемента со статическим позиционированием (position: static;) применение свойства top не даст никакого эффекта.
Примечание: допускается использование отрицательных значений.
| Значение по умолчанию: | auto |
|---|---|
| Применяется: | к позиционированным элементам |
| Анимируется: | да |
| Наследуется: | нет |
| Версия: | CSS2 |
| Синтаксис JavaScript: | object.style.top="50px" |
Синтаксис
top: auto|величина|inherit;
Значения свойства
| Значение | Описание |
|---|---|
| auto | Элемент остаётся на своём месте. |
| величина | Определяет величину смещения в единицах измерения, используемых в CSS. |
| % | Величина смещения, указанная в процентах, обрабатывается следующим образом:
|
| inherit | Указывает, что значение наследуется от родительского элемента. |
Пример
CSS Свойство:
top:
Результат:
Изменяйте значение для просмотра результата.
CSS Код:
div#myBox {
background-color: yellow;
width: 100px;
position: relative;
top: 0px;
}
background-color: yellow;
width: 100px;
position: relative;
top: 0px;
}