bottom
La propiedad bottom es la contraparte de top. Se usa para posicionar un elemento verticalmente desde el bborde inferior de su punto de referencia. Al igual que las otras (top, left y right), sólo funciona si el elemento tiene una propiedad position diferente a static.
<div class="contenedor-padre-bottom">
Contenedor Padre
<div class="caja-absolute-bottom">¡Pegada al fondo (bottom: 0)!</div>
</div>Usar top y bottom simultáneamente en un elemento con position: absolute o fixed tiene un efecto muy útil: fuerza al elemento a estirarse verticalmente entre los dos límites que definas.
Ejemplo: Muestra un contenedor padre y un contenedor hijo que se estira para ocupar casi toda la altura del padre, dejando un espacio de 10px arriba y 10px abajo.
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<title>Ejemplo Top y Bottom</title>
<link rel="stylesheet" href="nuevo.css">
</head>
<body>
<div class="contenedor-padre">
Contenedor Padre (250px de altura)
<div class="caja-estirada-vertical">
¡Estoy estirada!
</div>
<p style="position: absolute; bottom: 0; right: 10px;">Borde Inferior del Padre</p>
</div>
</body>
</html>1. position: relative en el padre: fundamental para que se convierta en el punto de referencia (en el contexto de posicionamiento) para su hijo absoluto.
2. position: absolute en el hijo: saca el elemento del flujo normal y lo prepara para ser posicionado con precisión.
3. top: 10px le dice al navegador que el borde superior de la caja estirada debe estar a 10px de distancia del borde superior del padre
4. bottom: 10px le dice al navegador que el borde inferior de la caja estirada debe estar a 10px del borde inferior del padre.
El navegador, al recibir instrucciones tanto para el inicio (top), como para el final (bottom), calcula la altura (height) necesaria para que el elemento ocpue todo el espacio entre 10px arriba y 10px abajo.
Esta técnica es muy útil para crear columnas laterales o separadores que se ajustan dinámicamente a la altura de su contenedor.