W3docs
es
Iniciar sesión

Propiedad bottom de CSS

The CSS bottom property specifies the bottom position of an element in combination with the position property. Find examples and try it yourself.

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 inicialauto
Se aplica aTodos los elementos. También se aplica a ::first-letter.
HeredadoNo.
AnimableSí. La posición bottom es animable.
VersiónCSS2
Sintaxis DOMobject.style.bottom = "10px";

Sintaxis

Sintaxis de la propiedad bottom de CSS

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

Ejemplo de la propiedad bottom:

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

<!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>
Pruébalo tú mismo »

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

<!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>
Pruébalo tú mismo »

Valores

ValorDescripciónProbarlo
autoEste es el valor predeterminado. Permite que el navegador calcule la posición del borde inferior.Probarlo »
percentageDefine la posición del elemento en porcentajes de la altura del bloque contenedor.
lengthDefine la posición del elemento en px, cm, etc. Se permiten valores negativos.Probarlo »
initialEstablece la propiedad en su valor predeterminado.Probarlo »
inheritHereda la propiedad de su elemento padre.

Práctica

Práctica

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