bottom

Pruébalo

bottom: 0;

bottom: 4em;

bottom: 10%;

bottom: 20px;

<section id="default-example">
  <div class="example-container">
    <div id="example-element">I am absolutely positioned.</div>
    <p>
      As much mud in the streets as if the waters had but newly retired from the
      face of the earth, and it would not be wonderful to meet a Megalosaurus,
      forty feet long or so, waddling like an elephantine lizard up Holborn
      Hill.
    </p>
  </div>
</section>

.example-container {
  border: 0.75em solid;
  padding: 0.75em;
  text-align: left;
  position: relative;
  width: 100%;
  min-height: 200px;
}

#example-element {
  background-color: #264653;
  border: 4px solid #ffb500;
  color: white;
  position: absolute;
  width: 140px;
  height: 60px;
}

El efecto de la propiedad bottom depende de cómo esté posicionado el elemento (es decir, del valor de la propiedad position):

• Cuando position se establece como absolute o fixed, la propiedad bottom especifica la distancia entre el borde exterior del margen inferior del elemento y el borde exterior del relleno inferior del bloque contenedor.

• Cuando position se establece en relative, la propiedad bottom especifica la distancia a la que se mueve el borde inferior del elemento con respecto a su posición normal.

• Cuando position se establece como sticky, la propiedad bottom se utiliza para calcular el modelo de restricción pegajosa.

• Cuando position se establece como static, la propiedad bottom no tiene efecto.

Cuando se especifican tanto top como bottom, position se establece como absolute o fixed, y la altura no está especificada (ya sea como auto o 100%), se respetan tanto las distancias de top como de bottom. En todas las demás situaciones, si la altura está restringida de alguna manera o position se establece como relative, la propiedad top tiene prioridad y la propiedad bottom se ignora.

Sintaxis

/* <longitud> valores */
bottom: 3px;
bottom: 2.4em;

/* <porcentaje>s de la altura del bloque contenedor */
bottom: 10%;

/* valor de palabra clave */
bottom: auto;

/* Valores globales */
bottom: inherit;
bottom: initial;
bottom: revert;
bottom: revert-layer;
bottom: unset;

Valores

<length>

Una longitud negativa, nula o positiva que representa:

• para elementos posicionados absolutamente, la distancia hasta el borde inferior del bloque contenedor..
• para elementos posicionados relativamente, la distancia que el elemento se mueve por encima de su posición normal..

<percentage>

Un porcentaje de la altura del bloque contenedor.

auto

Especifica que:

• para elementos posicionados absolutamente, la posición del elemento esta basado en la propiedad top, mientras que height: auto se trata como una altura según el contenido; o si top es también auto, el elemento se coloca donde debería ubicarse verticalmente si fuera un elemento estático.
• para elementos posicionados relativamente, la distancia del elemento de su posición normal se basa en la propiedad top; o si top tambièn es auto, el elemento no se mueve verticalmente.

inherit

Especifica que el valor es el mismo que el valor calculado de su elemento padre (que podría no ser su bloque contenedor). Este valor calculado se maneja entonces como si fuera un <length>, <percentage>, o auto.

Definición formal

Sintaxis formal

bottom = 
  auto                 |
  <length-percentage>  |
  <anchor()>           |
  <anchor-size()>      

<length-percentage> = 
  <length>      |
  <percentage>  

<anchor()> = 
  anchor( <anchor-name>?                  &&
  <anchor-side> , <length-percentage>? )  

<anchor-size()> = 
  anchor-size( [ <anchor-name> || <anchor-size> ]? , <length-percentage>? )  

<anchor-name> = 
  <dashed-ident>  

<anchor-side> = 
  inside        |
  outside       |
  top           |
  left          |
  right         |
  bottom        |
  start         |
  end           |
  self-start    |
  self-end      |
  <percentage>  |
  center        

<anchor-size> = 
  width        |
  height       |
  block        |
  inline       |
  self-block   |
  self-inline  

Ejemplos

Posicionamiento absoluto y fijo

Este ejemplo demuestra la diferencia en el comportamiento de la propiedad bottom, cuando la position es absolute versus fixed.

HTML

<p>
  This<br />is<br />some<br />tall,<br />tall,<br />tall,<br />tall,<br />tall<br />content.
</p>
<div class="fixed"><p>Fixed</p></div>
<div class="absolute"><p>Absolute</p></div>

CSS

p {
  font-size: 30px;
  line-height: 2em;
}

div {
  width: 48%;
  text-align: center;
  background: rgba(55, 55, 55, 0.2);
  border: 1px solid blue;
}

.absolute {
  position: absolute;
  bottom: 0;
  left: 0;
}

.fixed {
  position: fixed;
  bottom: 0;
  right: 0;
}

Resultado

Especificaciones

Compatibilidad con navegadores

Véase también

• inset, abreviatura de todas las propiedades relacionadas: top, bottom, left, y right
• Las propiedades lógicas: inset-block-start, inset-block-end, inset-inline-start, e inset-inline-end y las abreviaturas inset-block e inset-inline
• position