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
selector {
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:
<div id="elem">
<p></p>
</div>
#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:
<div id="elem">
<p></p>
</div>
#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
-
propiedad
top,
que establece la posición del borde superior del elemento -
propiedad
left,
que establece la posición del borde izquierdo del elemento -
propiedad
right,
que establece la posición del borde derecho del elemento -
pseudoelemento
::backdrop,
que establece la ubicación después del primer elemento -
propiedad
caption-side,
que establece la posición del título de la tabla