Top Eienskap

Die eienskap top spesifiseer die posisie van die boonste rand van 'n element vanaf die bokant van die ouer element. Waardes vir die eienskap kan geskryf word met algemeen aanvaarde grootte-eenhede, bv. in pixels, duim, punte, persentasies. Die gespesifiseerde waardes kan ook negatiewe getalle wees, in hierdie geval sal elemente oor mekaar val. Die koördinaatberekening word bepaal deur die eienskap position, wat gewoonlik die waarde relative (relatiewe posisie) of absolute (absoloute posisie) aanneem.

Sintaksis

selektor {
	top: grootte of auto;
}

Voorbeeld

Kom ons stel die posisie van die boonste grens van die kindelement gelyk aan 25px wanneer daaroor gehover word:

<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 ons nou die boonste grens van die kindelement op -50px plaas wanneer daaroor gehover word:

<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;
}

Sie ook

die eienskap bottom,
wat die posisie van die onderste rand van 'n element spesifiseer
die eienskap left,
wat die posisie van die linkerrand van 'n element spesifiseer
die eienskap right,
wat die posisie van die regterrand van 'n element spesifiseer
die pseudoelement ::backdrop,
wat die posisie agter die eerste element spesifiseer
die eienskap caption-side,
wat die posisie van 'n tabel-byskrif spesifiseer