Свойство top в CSS
- предыдущая страница text-underline-position
- Следующая страница transform
Определение и использование
Атрибут top определяет верхний край элемента. Этот атрибут определяет смещение верхнего внешнего края позиционируемого элемента от верхнего края содержащего блока.
Комментарий:Если значение атрибута position равно "static", то установка атрибута top не будет иметь никакого эффекта.
Описание
Для статических элементов, auto; для значений длины, соответствующие абсолютные значения; для процентных значений, указанные значения; в противном случае, auto.
Для относительных элементов, если top и bottom оба auto, их значения будут равны 0; если один из них auto, то значение будет равно обратному значению другого; если оба не auto, bottom будет равно обратному значению top.
См. также:
CSS учебник:CSS позиционирование
HTML DOM справочник:атрибут top
Пример
Установите верхний край изображения на 5 пикселей ниже верхнего края содержащего элемента:
img
{
position:absolute;
top:5px;
}
CSS синтаксис
top: auto|length|initial|inherit;
Значение атрибута
| Значение | Описание |
|---|---|
| автоматически | Значение по умолчанию. Расчет位置的 верхнего края производит браузер. |
| % | Установка верхнего края элемента в процентах от ширины содержащего элемента. Можно использовать отрицательные значения. |
| length | Установка верхнего края элемента с использованием единиц измерения px, cm и т.д. Можно использовать отрицательные значения. |
| inherit | Определяет, что значение top属性应该 быть получено из значения top属性的 родительского элемента. |
Технические детали
| Значение по умолчанию: | автоматически |
|---|---|
| Ингерит: | нет |
| Версия: | CSS2 |
| JavaScript синтаксис: | object.style.top="50px" |
Более примеров
- Установка верхнего края изображения с использованием фиксированного значения
- Этот пример демонстрирует, как использовать фиксированное значение для установки верхнего края изображения.
- Установка верхнего края изображения с использованием процента
- Этот пример демонстрирует, как использовать процентное значение для установки верхнего края изображения.
Поддержка браузерами
Числа в таблице указывают на первую версию браузера, которая полностью поддерживает этот атрибут.
| Chrome | IE / Edge | Firefox | Safari | Opera |
|---|---|---|---|---|
| 1.0 | 5.0 | 1.0 | 1.0 | 6.0 |
- предыдущая страница text-underline-position
- Следующая страница transform
