Īpašība top

Īpašība top nosaka elementa augšējās malas novietojumu attiecībā pret vecākelementa augšējo malu. Vērtības šai īpašībai var ierakstīt ar vispārpieņemtām mērvienībām, piemēram, pikseļos, collās, punktos, procentos. Iestatāmās vērtības var būt arī negatīvi skaitļi, šajā gadījumā elementi būs viens virs otra. Koordinātu atskaiti nosaka īpašība position, kurai parasti tiek iestatīta vērtība relative (relatīvais novietojums) vai absolute (absolūtais novietojums).

Sintakse

selektors {
	top: izmērs vai auto;
}

Piemērs

Uzliekot kursoru uz pakārtotā elementa, iestatīsim tā augšējās malas pozīciju uz 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;
}

Piemērs

Tagad, uzliekot kursoru, augšējā mala pakārtotajam elementam atradīsies -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;
}

Skatiet arī

īpašība bottom,
kas nosaka elementa apakšējās malas pozīciju
īpašība left,
kas nosaka elementa kreisās malas pozīciju
īpašība right,
kas nosaka elementa labās malas pozīciju
pseidoelements ::backdrop,
kas nosaka novietojumu aiz pirmā elementa
īpašība caption-side,
kas nosaka tabulas virsraksta pozīciju