bottom

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.

<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.

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  

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

• 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