CSS стиль top
Определяет для позиционируемого блока расстояние от верхнего края блока до верхнего края родителя, не включая отступ, поле и высоту рамки.
Отсчет координат зависит от значения свойства position. Если оно равно absolute
, в качестве родителя выступает окно браузера и положение элемента определяется от его верхнего края.
В случае значения relative
, отсчет идет от верхнего края исходного положения элемента. Если для родительского элемента задано CSS свойство position: relative
, то абсолютное позиционирование дочерних элементов определяет их положение от верхнего края родителя.
Краткая информация по CSS-свойству top
Значение по умолчанию | auto |
Наследуется | Нет |
Применяется | Ко всем элементам |
Правила написания свойства top
top: <размер> | <проценты> | auto
В качестве значений размера принимаются любые единицы длины, принятые в CSS — например, пикселы (px), дюймы (in), пункты (pt) и др. Значение свойства top
может быть как положительным, так и отрицательным. При задании значения в процентах, положение элемента вычисляется в зависимости от высоты родительского элемента.
auto
- не изменяет положение элемента.
Объектная модель
Объект.style.top
Пример применения стиля top
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Пример CSS стиля top</title>
<style>
p {
background: #ffbb00;
position: absolute;
padding: 5px 10px;
left: 40px;
top:36px;
}
</style>
</head>
<body>
<p id="top">1</p>
<p><a href="#top">Наверх</a></p>
<script>
document.getElementById("top").style.top = "110px";
</script>
</body>
</html>