La Propiedad BOTTOM

La propiedad bottom en CSS se utiliza para especificar el desplazamiento vertical de un elemento posicionado desde el borde inferior de su bloque contenedor.

 

La propiedad bottom en CSS se utiliza para especificar el desplazamiento vertical de un elemento posicionado desde el borde inferior de su bloque contenedor. Es una herramienta esencial para controlar la ubicación precisa de elementos en tu diseño web.

Importante: La propiedad bottom solo tiene efecto en elementos que están posicionados. Esto significa que su propiedad position debe estar establecida en un valor diferente a static (el valor predeterminado). Los valores comunes para position que habilitan el uso de bottom son:

  • relative
  • absolute
  • fixed
  • sticky

Sintaxis Básica

La sintaxis básica para usar la propiedad bottom es la siguiente:

CSS
 
selector {
  position: <valor_de_posicion>; /* Necesario para que bottom funcione */
  bottom: <valor>;
}

Donde <valor> puede ser una de las siguientes opciones:

Valores de la Propiedad bottom

  • <length>: Especifica un desplazamiento fijo desde el borde inferior del bloque contenedor. Puedes usar cualquier unidad de longitud CSS válida, como píxeles (px), ems (em), rems (rem), etc.

    CSS
     
    .elemento-absoluto {
  position: absolute;
  bottom: 20px; /* El elemento estará a 20 píxeles del borde inferior de su contenedor posicionado */
}

.elemento-relativo {
  position: relative;
  bottom: 1em; /* El elemento se desplazará 1 em hacia arriba desde su posición normal */
}

  • <percentage>: Especifica un desplazamiento como un porcentaje de la altura del bloque contenedor.

    CSS
     
    .elemento-absoluto-porcentaje {
  position: absolute;
  bottom: 10%; /* El elemento estará a una distancia del 10% de la altura del contenedor desde su borde inferior */
}

  • auto: Este es el valor inicial. El navegador calculará la posición del elemento basándose en el flujo normal del documento. Si se establece bottom en auto, cualquier valor previo de bottom se anulará.

    CSS
     
    .elemento {
  position: absolute;
  bottom: auto; /* El elemento se posicionará según el flujo normal (si no hay otras propiedades de posicionamiento) */
}

Contextos de Posicionamiento

El comportamiento de la propiedad bottom varía ligeramente dependiendo del valor de la propiedad position:

position: relative

Cuando un elemento tiene position: relative, bottom lo desplaza hacia arriba desde su posición normal en el flujo del documento. Otros elementos en la página no se verán afectados por este desplazamiento y ocuparán el espacio como si el elemento estuviera en su posición original.

HTML
 
<!DOCTYPE html>
<html>
<head>
<style>
  .contenedor {
    width: 300px;
    height: 200px;
    background-color: #f0f0f0;
    position: relative; /* Establecemos el contenedor como punto de referencia */
  }

  .elemento-relativo {
    position: relative;
    bottom: 30px; /* Se desplaza 30px hacia arriba desde su posición normal */
    background-color: lightblue;
    padding: 10px;
  }
</style>
</head>
<body>

  <div class="contenedor">
    <p>Este es texto dentro del contenedor.</p>
    <div class="elemento-relativo">Este elemento está relativamente posicionado con bottom.</div>
    <p>Más texto después del elemento.</p>
  </div>

</body>
</html>

position: absolute

Cuando un elemento tiene position: absolute, se elimina del flujo normal del documento y se posiciona relativamente a su ancestor posicionado más cercano. Si no hay ningún ancestro posicionado, se posiciona relativamente al elemento <html> (el bloque contenedor inicial). La propiedad bottom lo desplazará hacia arriba desde el borde inferior de este contenedor posicionado.

HTML
 
<!DOCTYPE html>
<html>
<head>
<style>
  .contenedor-posicionado {
    width: 400px;
    height: 300px;
    background-color: #e0e0e0;
    position: relative; /* Contenedor posicionado */
  }

  .elemento-absoluto {
    position: absolute;
    bottom: 50px; /* A 50px del borde inferior del .contenedor-posicionado */
    left: 50px;
    background-color: lightcoral;
    padding: 10px;
  }
</style>
</head>
<body>

  <div class="contenedor-posicionado">
    <p>Texto dentro del contenedor posicionado.</p>
    <div class="elemento-absoluto">Este elemento está absolutamente posicionado con bottom.</div>
  </div>

</body>
</html>

position: fixed

Cuando un elemento tiene position: fixed, se elimina del flujo normal del documento y se posiciona relativamente a la ventana del navegador (viewport). No se desplaza cuando el usuario hace scroll en la página. La propiedad bottom lo desplazará hacia arriba desde el borde inferior de la ventana del navegador.

HTML
 
<!DOCTYPE html>
<html>
<head>
<style>
  .footer-fijo {
    position: fixed;
    bottom: 0; /* Pegado a la parte inferior de la ventana */
    left: 0;
    width: 100%;
    background-color: #333;
    color: white;
    text-align: center;
    padding: 10px;
  }
</style>
</head>
<body>

  <h1>Contenido de la página</h1>
  <p>Mucho contenido aquí para poder hacer scroll...</p>
  <p>...</p>

  <div class="footer-fijo">Este es un footer fijo en la parte inferior.</div>

</body>
</html>

position: sticky

Cuando un elemento tiene position: sticky, se comporta como position: relative dentro de su flujo normal, pero se vuelve fijo cuando alcanza una cierta posición de desplazamiento en el viewport. La propiedad bottom puede usarse para definir el punto en el que el elemento se vuelve "pegajoso" desde la parte inferior del viewport.

HTML
 
<!DOCTYPE html>
<html>
<head>
<style>
  .sticky-elemento {
    position: sticky;
    bottom: 0; /* Se volverá fijo cuando su borde inferior alcance la parte inferior del viewport */
    background-color: yellow;
    padding: 10px;
    margin-bottom: 200px; /* Para tener espacio para hacer scroll */
  }
</style>
</head>
<body>

  <h1>Contenido superior</h1>
  <p>Más contenido...</p>
  <div class="sticky-elemento">Soy un elemento sticky desde la parte inferior.</div>
  <h1>Contenido inferior</h1>
  <p>Más contenido...</p>

</body>
</html>

Relación con la Propiedad top

Puedes usar las propiedades top y bottom juntas para definir la posición vertical de un elemento.

  • Elementos relativamente posicionados: Si se especifican tanto top como bottom, el elemento se moverá según el valor de top (la mayoría de los navegadores priorizan top).
  • Elementos absolutamente o fijamente posicionados: Si se especifican tanto top como bottom y la propiedad height no está definida o está en auto, el elemento intentará ocupar el espacio vertical definido por top y bottom. Si la altura está definida, entonces la posición se basará en top (o bottom en algunos casos, dependiendo del navegador y otras propiedades).

Casos de Uso Comunes

  • Crear footers que permanecen fijos en la parte inferior de la ventana del navegador (position: fixed; bottom: 0;).
  • Colocar elementos específicos en la parte inferior de un contenedor (position: absolute; bottom: 0;).
  • Ajustar la posición vertical de elementos de forma relativa a su ubicación original (position: relative; bottom: <valor>;).
  • Implementar elementos que se vuelven "pegajosos" en la parte inferior al hacer scroll (position: sticky; bottom: 0;).

Compatibilidad del Navegador

La propiedad bottom tiene una excelente compatibilidad con todos los navegadores modernos.

Consideraciones

  • Asegúrate de que la propiedad position del elemento esté establecida en un valor que no sea static para que bottom tenga efecto.
  • Los valores porcentuales para bottom se calculan con respecto a la altura del bloque contenedor.
  • Al usar position: absolute, el elemento se sacará del flujo normal, lo que podría afectar la disposición de otros elementos.

Conclusión

La propiedad bottom es una herramienta poderosa para el posicionamiento vertical en CSS. Al comprender cómo funciona en diferentes contextos de posicionamiento, puedes controlar con precisión la ubicación de tus elementos y crear diseños web más complejos y personalizados. Experimenta con diferentes valores y contextos para dominar su uso.