Bottom-ominaisuus

Ominaisuus bottom määrittää elementin alareunan sijainnin. Ominaisuuden arvot voidaan kirjoittaa yleisesti hyväksytyillä mittayksiköillä, esimerkiksi pikseleinä, tuumina, pisteinä, prosentteina. Asetetut arvot voivat olla myös negatiivisia lukuja, jolloin elementit asettuvat päällekkäin. Koordinaattien laskenta määräytyy ominaisuuden position perusteella, jolla yleensä on arvo relative (suhteellinen sijainti) tai absolute (absoluuttinen sijainti).

Syntaksi

valitsija {
	bottom: luku mittayksiköllä tai auto;
}

Esimerkki

Asetetaan lapsielementille hover-tilassa sen alareunan 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;
}
p:hover {
	bottom: 25px;
	width: 100px;
	height: 100px;
	border: 1px solid red;
}

Esimerkki

Asetetaan nyt hover-tilassa lapsielementin alareuna sijaintiin -50px:

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

Katso myös

ominaisuus top,
joka määrittää elementin yläreunan sijainnin
ominaisuus left,
joka määrittää elementin vasemman reunan sijainnin
ominaisuus right,
joka määrittää elementin oikean reunan sijainnin
pseudoelementti ::backdrop,
joka määrittää sijainnin ensimmäisen elementin jälkeen
ominaisuus caption-side,
joka määrittää taulukon otsikon sijainnin