CSS top Свойство
Пример
Установите верхний край позиционного элемента <div>, 50px вниз от верхнего края его ближайшего расположенного предка:
div {
position: absolute;
top:
50px;
border: 3px solid green;
}
Подробнее примеры ниже.
Определение и использование
Свойство top влияет на вертикальное положение позиционного элемента.
Это свойство не влияет на нерасположенные элементы.
- Если позиция: абсолютная; или положение: Исправлено; - Свойство
topустанавливает верхний край элемента на единицу выше/ниже верхнего края его ближайшего расположенного предка. - Если позиция: относительная; - Свойство
topделает верхний край элемента перемещается выше/ниже его нормального положения. - Если позиция: липкий; - Свойство
topсебя, как его позиция является относительной, когда элемент находится внутри видового экрана, и, как его положение фиксируется, когда он находится снаружи. - Если позиция: статическая; - Свойство
topне имеет эффекта.
| Значение по умолчанию: | auto |
|---|---|
| Inherited: | no |
| Animatable: | yes. Читайте о animatable |
| Version: | CSS2 |
| Синтаксис JavaScript: | object.style.top="100px" |
Поддержка браузера
Номера в таблице указывают первую версию браузера, которая полностью поддерживает свойство.
| Свойство | |||||
|---|---|---|---|---|---|
| top | 1.0 | 5.0 | 1.0 | 1.0 | 6.0 |
Синтаксис CSS
top: auto|length|initial|inherit;
Значения свойств
| Значение | Описание | |
|---|---|---|
| auto | Позволяет обозревателю рассчитать положение верхнего края. Это значение по умолчанию | |
| length | Устанавливает верхний край положения в px, cm, etc. Допустимы отрицательные значения. Читать о единицах длины | |
| % | Задает положение верхнего края в% от содержащего элемента. Допустимы отрицательные значения | |
| initial | Присваивает этому свойству значение по умолчанию. (Читайте о initial) | |
| inherit | Наследует это свойство из родительского элемента. (Читайте о inherit) |
Другие примеры
Пример
Используйте свойство Top с отрицательным значением и для элемента без позиционных предков:
div.b {
position: absolute;
top: -20px;
border: 3px solid blue;
}
div.c {
position: absolute;
top: 150px;
border: 3px solid green;
}
Похожие страницы
CSS Справочник: CSS Positioning
CSS Справка: bottom Свойство
CSS Справка: left Свойство
CSS Справка: right Свойство
HTML DOM Справочник: top Свойство