Top atribuut

Atribuut top määrab elemendi ülemise ääre asukoha vanemaelemendi ülemisest äärest. Atribuudi väärtusi saab määrata üldtunnustatud mõõtühikutega, näiteks pikslites, tollides, punktides, protsentides. Määratud väärtused võivad olla ka negatiivsed arvud, mis puhul elemendid asetsevad üksteise peale. Koordinaatide loendamine määratakse atribuudiga position, mis tavaliselt võtab väärtuseks relative (suhteline asend) või absolute (absoluutne asend).

Süntaks

selektor {
	top: suurus või auto;
}

Näide

Määrame lapselemendile hiirega üleminnes tema ülemise ääre asukohaks väärtuse 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;
}

Näide

Nüüd paneme üleminnel lapselemendi ülemise ääre asuma -50px kõrgusele:

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

Vaata ka

atribuut bottom,
mis määrab elemendi alumise ääre asukoha
atribuut left,
mis määrab elemendi vasaku ääre asukoha
atribuut right,
mis määrab elemendi parema ääre asukoha
pseudoelement ::backdrop,
mis määrab asukoha pärast esimest elementi
atribuut caption-side,
mis määrab tabeli pealkirja asukoha