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 Свойство