Top-ominaisuus

Ominaisuus top asettaa elementin yläreunan sijainnin vanhempielementin yläosasta. Ominaisuuden arvot voidaan kirjoittaa yleisesti hyväksytyillä kooko yksiköillä, esimerkiksi pikseleinä, tuumina, pisteinä, prosentteina. Asetettavat arvot voivat olla myös negatiivisia lukuja, tässä tapauksessa elementit asettuvat päällekkäin. Koordinaattien laskenta määräytyy ominaisuuden position perusteella, joka yleensä saa arvon relative (suhteellinen sijainti) tai absolute (absoluuttinen sijainti).

Syntaksi

valitsija {
	top: koko tai auto;
}

Esimerkki

Asetetaan lapsielementille, kun sitä osoitetaan, sen yläreunan sijainniksi 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;
}

Esimerkki

Asetetaan nyt lapsielementin yläreuna kohdalleen -50px, kun sitä osoitetaan:

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

Katso myös

ominaisuus bottom,
joka asettaa elementin alareunan sijainnin
ominaisuus left,
joka asettaa elementin vasemman reunan sijainnin
ominaisuus right,
joka asettaa elementin oikean reunan sijainnin
pseudoelementti ::backdrop,
joka asettaa sijainnin ensimmäisen elementin jälkeen
ominaisuus caption-side,
joka asettaa taulukon otsikon sijainnin