Propiedad bottom

La propiedad bottom establece la posición del borde inferior del elemento. Los valores para la propiedad se pueden escribir con unidades de medida comúnmente aceptadas, por ejemplo, en píxeles, pulgadas, puntos, porcentajes. Los valores establecidos también pueden ser números negativos, en este caso los elementos se superpondrán unos a otros. El cálculo de las coordenadas está determinado por la propiedad position, que normalmente toma el valor relative (posición relativa) o absolute (posición absoluta).

Sintaxis

cssselector {
  bottom: número con unidad de medida o auto;
}

Ejemplo

Al pasar el cursor sobre el elemento hijo establezcamos la posición de su borde inferior igual a 25px:

html<div id="elem">
  <p></p>
</div>

css#elem {
  width: 400px;
  height: 300px;
  border: 1px solid black;
}
p {
  position: relative;
  width: 100px;
  height: 100px;
  border: 1px solid red;
  margin-top: 50px;
}
p:hover {
  bottom: 25px;
  width: 100px;
  height: 100px;
  border: 1px solid red;
}

Результат:

Ejemplo

Y ahora que al pasar el cursor el borde inferior del elemento hijo esté ubicado a -50px:

html<div id="elem">
  <p></p>
</div>

css#elem {
  width: 400px;
  height: 300px;
  border: 1px solid black;
}
p {
  position: relative;
  width: 100px;
  height: 100px;
  border: 1px solid red;
  margin-top: 50px;
}
p:hover {
  bottom: -50px;
  width: 100px;
  height: 100px;
  border: 1px solid red;
}

Результат:

Véase también