Propiedad bottom

La propiedad bottom establece la posición del borde inferior del elemento. Los valores para la propiedad se pueden escribir con unidades de medida comúnmente aceptadas, por ejemplo, en píxeles, pulgadas, puntos, porcentajes. Los valores establecidos también pueden ser números negativos, en este caso los elementos se superpondrán unos a otros. El cálculo de las coordenadas está determinado por la propiedad position, que normalmente toma el valor relative (posición relativa) o absolute (posición absoluta).

Sintaxis

selector {
	bottom: número con unidad de medida o auto;
}

Ejemplo

Al pasar el cursor sobre el elemento hijo establezcamos la posición de su borde inferior igual a 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;
}

Ejemplo

Y ahora que al pasar el cursor el borde inferior del elemento hijo esté ubicado a -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;
}

Véase también

propiedad top,
que establece la posición del borde superior del elemento
propiedad left,
que establece la posición del borde izquierdo del elemento
propiedad right,
que establece la posición del borde derecho del elemento
pseudoelemento ::backdrop,
que establece la ubicación después del primer elemento
propiedad caption-side,
que establece la posición del título de la tabla