Свойство top
Описание
Свойство top для позиционированного элемента определяет расстояние от верхнего края родительского элемента до верхнего края дочернего элемента. Отсчёт координат зависит от значения свойства position. Если оно равно absolute, в качестве родителя выступает окно браузера и положение элемента определяется от его верхнего края.
В случае значения relative, top отсчитывается от верхнего края исходного положения элемента. Если для родительского элемента задано position: relative, то абсолютное позиционирование дочерних элементов определяет их положение от верхнего края родителя.
Синтаксис
top: размер | проценты | auto;Пример
<!DOCTYPE html>
<html lang='ru'>
<head>
<meta charset='UTF-8'>
<meta name='viewport' content='width=device-width, initial-scale=1.0'>
<title>Document</title>
</head>
<body>
<style>
#bot {
width: 200px;
height: 100px;
background-color: #97dfc8;
border: 3px solid black;
position: relative;
top: 200px;
}
</style>
<div id='bot'></div>
</body>
</html>Читайте также
Свойство transform
Трансформирует элемент, в частности, позволяет его масштабировать, вращать, сдвигать, наклонять, ...
Правило @viewport
Позволяет оптимизировать макет веб-страницы в зависимости от различных устройств и их размеров. Я...
Свойство left
Для позиционированного элемента определяет расстояние от левого края родительского элемента, не в...
Свойство border-spacing
Задаёт расстояние между границами ячеек в таблице. Не работает в случае, когда для таблицы устано...
Свойство border-top-left-radius
Устанавливает радиус скругления левого верхнего угла рамки.Если рамка не задана, то скругление та...