Propiedad bottom de CSS

La propiedad bottom de CSS especifica la posición inferior de un elemento en combinación con la propiedad position.

Nota: La propiedad bottom no tiene efecto en elementos con position: static (el valor predeterminado).

Dependiendo de cómo se posicione el elemento, el efecto de la propiedad bottom puede ser diferente. En particular:

Cuando el posicionamiento de un elemento es relative, absolute, fixed o sticky, el valor bottom juega un papel importante.
Cuando la posición es fixed, el elemento se posiciona en relación con el viewport de la pantalla y permanece fijo al hacer scroll.
Cuando es absolute, el elemento se posiciona en relación con su contenedor.
Cuando la posición es relative, hace que el borde inferior del elemento se mueva por encima o por debajo de su posición normal.
Para sticky, el elemento se comporta como relative hasta que se alcanza un umbral de desplazamiento, después de lo cual se comporta como fixed en relación con el viewport.

Valor inicial	auto
Se aplica a	Todos los elementos. También se aplica a ::first-letter.
Heredado	No.
Animable	Sí. La posición bottom es animable.
Versión	CSS2
Sintaxis DOM	object.style.bottom = "10px";

Sintaxis

Sintaxis de la propiedad bottom de CSS

css

bottom: auto | length | percentage | initial | inherit;

Ejemplo de la propiedad bottom:

Ejemplo de la propiedad bottom de CSS con el valor position absolute

html

<!DOCTYPE html>
<html>
  <head>
    <style>
      div.parent {
        position: relative;
        height: 300px;
        width: 80%;
        border: 3px solid #8ebf42;
      }
      div.absolute {
        position: absolute;
        width: 50%;
        bottom: 10px;
        border: 3px solid #8ebf42;
      }
    </style>
  </head>
  <body>
    <h2>Ejemplo de la propiedad bottom</h2>
    <div class="parent">
      La posición de este div está establecida en relative.
      <div class="absolute">El borde inferior de este div se coloca 10 píxeles por encima del borde inferior del elemento contenedor, y la posición está establecida en absolute.</div>
    </div>
  </body>
</html>

Try it Yourself »

Resultado

Propiedad bottom de CSS

Ejemplo de la propiedad bottom con todas las posiciones:

Ejemplo de la propiedad bottom de CSS con todas las posiciones

html

<!DOCTYPE html>
<html>
  <head>
    <style>
      div.parent {
        position: relative;
        height: 180px;
        border: 3px solid #8AC007;
      }
      div.absolute {
        position: absolute;
        width: 50%;
        bottom: 20px;
        border: 3px solid #8AC007;
      }
      div.relative {
        position: relative;
        width: 50%;
        bottom: 2px;
        border: 3px solid #8AC007;
      }
      div.fixed {
        position: fixed;
        width: 50%;
        bottom: 50px;
        border: 3px solid #8AC007;
      }
      div.sticky {
        position: sticky;
        top: 0;
        width: 50%;
        bottom: 10px;
        border: 3px solid #8AC007;
      }
    </style>
  </head>
  <body>
    <h2>Ejemplo de la propiedad bottom</h2>
    <div class="parent">
      Este elemento div tiene position: relative.
      <div class="absolute"><strong>position: absolute y bottom 20px</strong>
        <br />El borde inferior de este div se coloca 20 píxeles por encima del borde inferior del elemento contenedor.</div>
    </div>
    <br />
    <div class="parent">
      Este elemento div tiene position: relative.
      <div class="relative"><strong>position: relative y bottom 2px</strong>
        <br />El borde inferior de este div se coloca 2 píxeles por encima de su posición normal.</div>
    </div>
    <br />
    <div class="fixed"><strong>position: fixed y bottom 50px</strong>
      <br />El borde inferior de este div se coloca 50 píxeles desde la parte inferior del viewport.</div>
    <div class="parent">
      Este elemento div tiene position: relative.
      <div class="sticky"><strong>position: sticky y bottom 10px</strong>
        <br />Este div es sticky.</div>
    </div>
  </body>
</html>

Try it Yourself »

Valores

Valor	Descripción	Probarlo
auto	Este es el valor predeterminado. Permite que el navegador calcule la posición del borde inferior.	Probarlo »
percentage	Define la posición del elemento en porcentajes de la altura del bloque contenedor.
length	Define la posición del elemento en px, cm, etc. Se permiten valores negativos.	Probarlo »
initial	Establece la propiedad en su valor predeterminado.	Probarlo »
inherit	Hereda la propiedad de su elemento padre.

Práctica

¿Qué hace la propiedad 'bottom' en CSS?

Posiciona un elemento desde la parte inferior de su contenedor.Proporciona refugio a los sin techo.Puede tomar 'auto' como valor.Controla el color del borde de un elemento.Debe usarse con la propiedad position para funcionar correctamente.Redimensiona automáticamente las imágenes en una página web.

Propiedad bottom de CSS ​

Sintaxis ​

Ejemplo de la propiedad bottom: ​

Resultado ​

Ejemplo de la propiedad bottom con todas las posiciones: ​

Valores ​

Práctica ​

Propiedad bottom de CSS

Sintaxis

Ejemplo de la propiedad bottom:

Resultado

Ejemplo de la propiedad bottom con todas las posiciones:

Valores

Práctica