top Özelliği

top özelliği, bir öğenin üst kenarının üst ebeveyn öğesine göre konumunu belirler. Özellik için değerler, piksel, inç, punto, yüzde gibi yaygın boyut birimleriyle yazılabilir. Belirlenen değerler negatif sayılar da olabilir, bu durumda öğeler üst üste binecektir. Koordinatların başlangıcı, genellikle relative (göreli konum) veya absolute (mutlak konum) değerini alan position özelliği tarafından belirlenir.

Sözdizimi

seçici {
	top: boyut veya auto;
}

Örnek

Alt öğenin üzerine gelindiğinde, üst kenar konumunu 25px olarak ayarlayalım:

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

Örnek

Şimdi ise, üzerine gelindiğinde alt öğenin üst kenarının -50px konumunda olmasını sağlayalım:

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

Ayrıca Bakınız

Bir öğenin alt kenar konumunu belirleyen bottom özelliği
Bir öğenin sol kenar konumunu belirleyen left özelliği
Bir öğenin sağ kenar konumunu belirleyen right özelliği
İlk öğeden sonraki konumu belirleyen ::backdrop sözde öğesi
Tablo başlığının konumunu belirleyen caption-side özelliği