top | htmlbook.ru
Internet Explorer | Chrome | Opera | Safari | Firefox | Android | iOS | |
6.0+ | 8.0+ | 1.0+ | 3.5+ | 3.1+ | 1.0+ | 1.0+ | 1.0+ |
Краткая информация
Версии CSS
CSS 1 | CSS 2 | CSS 2.1 | CSS 3 |
---|---|---|---|
Описание
Для позиционированного элемента определяет расстояние от верхнего края родительского элемента до верхнего края дочернего элемента. Отсчет координат зависит от значения свойства position. Если оно равно absolute, в качестве родителя выступает окно браузера и положение элемента определяется от его верхнего края (рис. 1). В случае значения relative, top отсчитывается от верхнего края исходного положения элемента. Если для родительского элемента задано position: relative, то абсолютное позиционирование дочерних элементов определяет их положение от верхнего края родителя (рис. 2).
Рис. 1. Значение top относительно окна браузера
Рис. 2. Значение top относительно родителя
Синтаксис
top: значение | проценты | auto | inherit
Значения
В качестве значений принимаются любые единицы длины, принятые в CSS — например, пикселы (px), дюймы (in), пункты (pt) и др. Значение свойства top может быть и отрицательным, в этом случае возможны наложения разных элементов друг на друга. При задании значения в процентах, положение элемента вычисляется в зависимости от высоты родительского элемента.
- auto
- Не изменяет положение элемента.
- inherit
- Наследует значение родителя.
Пример
HTML5CSS2.1IECrOpSaFx
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>top</title> <style> .menu { position: absolute; /* Абсолютное позиционирование */ left: 300px; /* Положение от левого края */ top: 50px; /* Положение от верхнего края */ width: 120px; /* Ширина блока */ background: #e0e0e0; /* Цвет фона */ border: 1px solid #000; /* Параметры рамки */ padding: 5px; /* Поля вокруг текста */ } .content { position: absolute; /* Абсолютное позиционирование */ left: 0; /* Положение от левого края */ top: 0; /* Положение от верхнего края */ width: 280px; /* Ширина блока */ background: #00a5b6; /* Цвет фона */ color: white; /* Цвет текста */ padding: 5px; /* Поля вокруг текста */ padding-right: 60px; /* Отступ справа */ text-align: justify; /* Выравнивание по ширине */ } </style> </head> <body> <div> Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat. Ut wisis enim ad minim veniam, quis nostrud exerci tution ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis te feugifacilisi. </div> <div> Ut wisi enim ad minim veniam, quis nostrud exerci taion ullamcorper suscipit lobortis nisl ut aliquip ex en commodo consequat. </div> </body> </html>
Результат данного примера показан на рис. 3.
Рис. 2. Применение свойства top
Объектная модель
[window.]document.getElementById(«elementID»).style.top
Браузеры
В браузере Internet Explorer 6 для абсолютно позиционированных элементов нельзя одновременно задать свойства top, left, right, bottom.
Internet Explorer до версии 7.0 включительно не поддерживает значение inherit.
Свойство top | CSS справочник
CSS свойстваОпределение и применение
CSS свойство top указывает направление смещения позиционированного элемента от верхнего края.
Результат применения свойства top напрямую зависит от позиционирования элемента к которому оно применяется, т.е. элемент будет смещаться в зависимости от значения свойства position:
- position: relative; (элемент с относительным позиционированием) — при использовании свойства top элемент смещается вверх или вниз относительно его текущей позиции (положительное значение смещает вниз, отрицательное вверх). На примере top: 25px;
- position: absolute; (элемент с абсолютным позиционированием) — при использовании свойства top смещается вверх или вниз относительно верхнего края его предка, при этом предок должен иметь значение position отличное от установленного по умолчанию — static, иначе отсчёт будет вестись относительно верхнего края окна браузера (как при position: fixed;). На примере top: 40px;
- position: fixed;(элемент с фиксированным позиционированием) — при использовании свойства top элемент смещается вверх или вниз относительно верхнего края окна браузера. На примере top: 200px;
- position: static; (элемент со статическим позиционированием — по умолчанию) — значение свойства top не повлияют на позиционирование элемента.
Поддержка браузерами
CSS синтаксис:
top:"auto | length | initial | inherit";
JavaScript синтаксис:
object.style.top = "-100px"
Значения свойства
Значение | Описание |
---|---|
auto | Позволяет браузеру вычислять положение от верхнего края. Это значение по умолчанию. |
length | Определяет величину смещения (px, em, pt, и т.п.). Допускается использование отрицательных значений. |
% | Величина смещения, указанная в процентах от содержащего элемента. Допускается использование отрицательных значений. |
initial | Устанавливает свойство в значение по умолчанию. |
inherit | Указывает, что значение наследуется от родительского элемента. |
Версия CSS
CSS2Наследуется
Нет.Анимируемое
Да.Пример использования
<!DOCTYPE html> <html> <head> <title>Свойство top.</title> <style> body { background-color:khaki; /* задаём задний фон цвета хаки */ } .relative { position:relative; /* элемент с относительным позиционированием */ top : 25px; * задаём смещение элемента вниз относительно его текущей позиции */ width 200px; /* задаём ширину блока */ height: 250px; /* задаём высоту блока */ border 5px solid; /* задаём стиль для границ сплошной и ширину 5px */ background-color:orange; /* задаём задний фон оранжевого цвета */ } .absolute { position:absolute; /* элемент с абсолютным позиционированием */ top : 40px; * задаём смещение элемента вниз относительно верхнего края его предка */ width 150px; /* задаём ширину блока */ height: 100px; /* задаём высоту блока */ border 5px solid green; /* задаём стиль для границ сплошной, ширину 5px и цвет зелёный */ } .fixed { position:fixed; /* элемент с фиксированным позиционированием */ top : 200px; * задаём смещение элемента вниз относительно верхнего края окна браузера */ width 150px; /* задаём ширину блока */ height: 100px; /* задаём высоту блока */ border 5px solid red; /* задаём стиль для границ сплошной, ширину 5px и цвет красный */ } </style> </head> <body> <div class = "relative">div position:relative;</div> <div class = "absolute">div position:absolute;</div> <div class = "fixed">div position:fixed;</div> </body> </html>
top | CSS справочник
Поддержка браузерами
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 | Указывает, что значение наследуется от родительского элемента. |
Пример
Изменяйте значение для просмотра результата.
div#myBox {
width: 100px;
position: relative;
top: 0px;
}
top | CSS | WebReference
Для позиционированного элемента определяет расстояние от верхнего края родительского элемента до верхнего края дочернего элемента. Отсчёт координат зависит от значения свойства position. Если оно равно absolute, в качестве родителя выступает окно браузера и положение элемента определяется от его верхнего края (рис. 1). В случае значения relative, top отсчитывается от верхнего края исходного положения элемента. Если для родительского элемента задано position: relative, то абсолютное позиционирование дочерних элементов определяет их положение от верхнего края родителя (рис. 2).
Рис. 1. Значение top относительно окна браузера
Рис. 2. Значение top относительно родителя
Краткая информация
Значение по умолчанию | auto |
---|---|
Наследуется | Нет |
Применяется | Ко всем элементам |
Анимируется | Да |
Синтаксис ?
top: <размер> | <проценты> | auto
Обозначения
Описание | Пример | |
---|---|---|
<тип> | Указывает тип значения. | <размер> |
A && B | Значения должны выводиться в указанном порядке. | <размер> && <цвет> |
A | B | Указывает, что надо выбрать только одно значение из предложенных (A или B). | normal | small-caps |
A || B | Каждое значение может использоваться самостоятельно или совместно с другими в произвольном порядке. | width || count |
[ ] | Группирует значения. | [ crop || cross ] |
* | Повторять ноль или больше раз. | [,<время>]* |
+ | Повторять один или больше раз. | <число>+ |
? | Указанный тип, слово или группа не является обязательным. | inset? |
{A, B} | Повторять не менее A, но не более B раз. | <радиус>{1,4} |
# | Повторять один или больше раз через запятую. | <время># |
Значения
В качестве значений принимаются любые единицы длины, принятые в CSS — например, пиксели (px), дюймы (in), пункты (pt) и др. Значение свойства top может быть и отрицательным, в этом случае возможны наложения разных элементов друг на друга. При задании значения в процентах, положение элемента вычисляется в зависимости от высоты родительского элемента.
- auto
- Не изменяет положение элемента.
Пример
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>top</title>
<style>
.menu {
position: absolute; /* Абсолютное позиционирование */
left: 300px; /* Положение от левого края */
top: 50px; /* Положение от верхнего края */
width: 120px; /* Ширина блока */
background: #e0e0e0; /* Цвет фона */
border: 1px solid #000; /* Параметры рамки */
padding: 5px; /* Поля вокруг текста */
}
.content {
position: absolute; /* Абсолютное позиционирование */
left: 0; /* Положение от левого края */
top: 0; /* Положение от верхнего края */
width: 280px; /* Ширина блока */
background: #00a5b6; /* Цвет фона */
color: white; /* Цвет текста */
padding: 5px; /* Поля вокруг текста */
padding-right: 60px; /* Отступ справа */
text-align: justify; /* Выравнивание по ширине */
}
</style>
</head>
<body>
<div>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed
diem nonummy nibh euismod tincidunt ut lacreet dolore magna
aliguam erat volutpat. Ut wisis enim ad minim veniam, quis
nostrud exerci tution ullamcorper suscipit lobortis nisl ut
aliquip ex ea commodo consequat. Duis te feugifacilisi.
</div>
<div>
Ut wisi enim ad minim veniam, quis nostrud exerci taion
ullamcorper suscipit lobortis nisl ut aliquip ex en
commodo consequat.
</div>
</body>
</html>
Результат данного примера показан на рис. 3.
Рис. 2. Применение свойства top
Объектная модель
Примечание
В браузере Internet Explorer до версии 7 для абсолютно позиционированных элементов нельзя одновременно задать свойства top, left, right, bottom.
Спецификация ?
Спецификация
Каждая спецификация проходит несколько стадий одобрения.
- Recommendation (Рекомендация) — спецификация одобрена W3C и рекомендована как стандарт.
- Candidate Recommendation (Возможная рекомендация) — группа, отвечающая за стандарт, удовлетворена, как он соответствует своим целям, но требуется помощь сообщества разработчиков по реализации стандарта.
- Proposed Recommendation (Предлагаемая рекомендация) — на этом этапе документ представлен на рассмотрение Консультативного совета W3C для окончательного утверждения.
- Working Draft (Рабочий проект) — более зрелая версия черновика после обсуждения и внесения поправок для рассмотрения сообществом.
- Editor’s draft (Редакторский черновик) — черновая версия стандарта после внесения правок редакторами проекта.
- Draft (Черновик спецификации) — первая черновая версия стандарта.
Браузеры
В таблице браузеров применяются следующие обозначения.
- — свойство полностью поддерживается браузером со всеми допустимыми значениями;
- — свойство браузером не воспринимается и игнорируется;
- — при работе возможно появление различных ошибок, либо свойство поддерживается лишь частично, например, не все допустимые значения действуют или свойство применяется не ко всем элементам, которые указаны в спецификации.
Число указывает версию браузера, начиная с которой свойство поддерживается.
×Автор и редакторы
Автор: Влад Мержевич
Последнее изменение: 29.08.2017
Редакторы: Влад Мержевич