Уласцівасць 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,
якое задае пазіцыю загалоўка табліцы