Справочник по CSS : Тематический указатель : Справочник по свойствам и атрибутам : Позиционирование : top
смотрим также
Материал из Справочник Web-языков
Содержание |
Атрибут top | Свойство top
Задает верхнюю позицию объекта, то есть расстояние от верхнего края элемента до верхнего края его родительского объекта.
Синтаксис
HTML | { top : sPosition } |
Скрипты | [ sPosition = ] object.style.top |
Используемые значения
- sPosition
- Строка, которая может определять и принимать от одно из следующих значений:
- auto
- Значение по умолчанию. Позиция элемента определяется по умолчанию в зависимости от разметки страницы.
- length
- Задается вещественным числом, выраженным в абсолютных (cm, mm, in, pt или pc) или относительных (em, ex или px) единицах измерения.
- percentage
- Числовое значение, выраженное в процентах (%). Процентное отношение высчитывается от ширины родительского объекта.
Это свойство читается/записывается для всех объектов, кроме currentStyle (только чтение). Значением по умолчанию является auto. Атрибут Каскадных таблиц стилей (CSS) не наследуется.
Замечания
Вы можете использовать атрибут top только тогда, когда задан атрибут position. Иначе, значение атрибута top проигнорируется.
Значение свойства top является строковым, поэтому его нельзя использовать в вычислениях. Вместо него применяйте значения свойств pixelTop или posTop.
В качестве родительского элемента для объекта может выступать окно браузера.
Примеры
В следующих примерах используются атрибут top и свойство top для изменения расположения объекта.
В первом примере задается позиция объекта div.
<DIV STYLE="position:absolute;top:100px"> . . . </DIV>
Во втором примере с помощью скрипта изменяется расположение рисунка на странице, когда происходят события onmouseover и onmouseout (соответственно, наведение курсора мыши на объект и перемещение курсора мыши за границы текущего объекта).
<IMG SRC="cone.jpg" STYLE="position:absolute; top:80px;" onmouseover="this.style.top='100px''" onmouseout="this.style.top='80px'" >
Стандарты
Это свойство описано в Cascading Style Sheets (CSS), Level 2 (CSS2)
Поддерживаемые браузеры
Internet Explorer 5.5, 6.0, 7.0, 8.0
Opera 7.0, 8.0, 9.2, 9.5, 9.6, 10.0
Safari 1.3, 2.0, 3.1
Firefox 1.5, 2.0, 3.0, 3.5
Смотри также
Ссылки на источники
https://msdn.microsoft.com/en-us/library/ms531177(VS.85).aspx