Својството 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,
кое ја задава позицијата на насловот на табелата