bottom Özelliği

bottom özelliği, bir öğenin alt kenarının konumunu belirler. Özellik için değerler, piksel, inç, punto, yüzde gibi yaygın ölçü 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 {
	bottom: ölçü birimli sayı veya auto;
}

Örnek

Alt öğenin üzerine gelindiğinde, alt 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;
}
p:hover {
	bottom: 25px;
	width: 100px;
	height: 100px;
	border: 1px solid red;
}

Örnek

Şimdi de, üzerine gelindiğinde alt öğenin alt 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;
	width: 100px;
	height: 100px;
	border: 1px solid red;
	margin-top: 50px;
}
p:hover {
	bottom: -50px;
	width: 100px;
	height: 100px;
	border: 1px solid red;
}

Ayrıca Bakınız

top özelliği,
öğenin üst kenar konumunu belirler
left özelliği,
öğenin sol kenar konumunu belirler
right özelliği,
öğenin sağ kenar konumunu belirler
::backdrop sözde öğesi,
ilk öğeden sonraki konumu belirler
caption-side özelliği,
tablo başlığının konumunu belirler