Eigenschap bottom

De eigenschap bottom bepaalt de positie van de onderrand van een element. Waarden voor de eigenschap kunnen worden opgegeven met algemeen aanvaarde maateenheden, bijvoorbeeld in pixels, inches, punten, procenten. De opgegeven waarden kunnen ook negatieve getallen zijn, in dat geval zullen elementen over elkaar heen vallen. De coördinatenberekening wordt bepaald door de eigenschap position, die meestal de waarde relative (relatieve positie) of absolute (absolute positie) aanneemt.

Syntaxis

selector {
	bottom: getal met meeteenheid of auto;
}

Voorbeeld

Laten we bij het hoveren over het kindelement de positie van de onderrand instellen op 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;
}

Voorbeeld

En laten we nu bij het hoveren de onderrand van het kindelement positioneren op -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;
}

Zie ook

de eigenschap top,
die de positie van de bovenrand van een element bepaalt
de eigenschap left,
die de positie van de linkerrand van een element bepaalt
de eigenschap right,
die de positie van de rechterrand van een element bepaalt
het pseudoelement ::backdrop,
dat de positionering na het eerste element bepaalt
de eigenschap caption-side,
die de positie van de tabeltitel bepaalt