Свойство top

Свойството top задава позицията на горния ръб на елемента от горната част на родителския елемент. Стойностите за свойството могат да бъдат записани с общоприети мерни единици, например в пиксели, инчове, точки, проценти. Задаваните стойности могат да бъдат и отрицателни числа, в този случай елементите ще се наслагват един върху друг. Отброяването на координатите се определя от свойството position, което обикновено приема стойност relative (относителна позиция) или absolute (абсолютна позиция).

Синтаксис

селектор {
	top: размер или auto;
}

Пример

Нека при посочване на детския елемент да зададем позиция на горния му ръб равна на 25px:

<div id="elem">
	<p></p>
</div>

#elem {
	width: 400px;
	height: 300px;
	border: 1px solid black;
}
p {
	position: relative;
	width: 100px;
	height: 100px;
	border: 1px solid red;
	margin-top: 50px;
	margin-left: 50px;
}
p:hover {
	top: 25px;
	width: 100px;
	height: 100px;
	border: 1px solid red;
}

Пример

А сега нека при посочване горният ръб на детския елемент да бъде разположен на -50px:

<div id="elem">
	<p></p>
</div>

#elem {
	width: 400px;
	height: 300px;
	border: 1px solid black;
}
p {
	position: relative;
	margin-top: 50px;
	width: 100px;
	height: 100px;
	border: 1px solid red;
	margin-left: 50px;
}
p:hover {
	top: -50px;
	width: 100px;
	height: 100px;
	border: 1px solid red;
}

Вижте също

свойство bottom,
което задава позиция на долния ръб на елемента
свойство left,
което задава позиция на левия ръб на елемента
свойство right,
което задава позиция на десния ръб на елемента
псевдоелемент ::backdrop,
който задава разположение след първия елемент
свойство caption-side,
което задава позиция на заглавието на таблица