Eigenschap top

De eigenschap top bepaalt de positie van de bovenrand van het element ten opzichte van de bovenkant van het bovenliggende element. Waarden voor de eigenschap kunnen worden opgegeven met algemeen aanvaarde maateenheden, bijvoorbeeld in pixels, inches, punten, procenten. De opgegeven waarden kunnen ook negatieve getallen zijn, in dat geval zullen elementen over elkaar heen vallen. De coördinatenberekening wordt bepaald door de eigenschap position, die meestal de waarde relative (relatieve positie) of absolute (absoluut positie) aanneemt.

Syntaxis

selector {
	top: grootte of auto;
}

Voorbeeld

Laten we bij het hoveren over het onderliggende element de positie van de bovenrand instellen op 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;
}

Voorbeeld

En laat nu bij het hoveren de bovenrand van het onderliggende element worden geplaatst op -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;
}

Zie ook

eigenschap bottom,
die de positie van de onderrand van het element bepaalt
eigenschap left,
die de positie van de linkerrand van het element bepaalt
eigenschap right,
die de positie van de rechterrand van het element bepaalt
pseudoelement ::backdrop,
die de positionering na het eerste element bepaalt
eigenschap caption-side,
die de positie van de tabeltitel bepaalt