| Definición | Indica el desplazamiento entre el borde inferior del elemento y la parte inferior de su elemento contenedor |
|---|---|
| Valores permitidos | Alguno o todos los siguientes valores y en cualquier orden: |
| Si se utilizan porcentajes, hace referencia a la altura del elemento en el que se encuentra | |
| Valor inicial | auto |
| Se aplica a | Los elementos posicionados |
| Válida en | medios visuales |
| Se hereda | no |
| Definición en el estándar | w3.org/TR/CSS2/visuren.html#propdef-bottom |
Ejemplos de uso
La propiedad bottom permite desplazar un elemento respecto a su posición original tomando como referencia el borde inferior del elemento. Por su propia definición, esta propiedad sólo afecta a los elementos cuya propiedad position tenga un valor de relative, absolute o fixed.
El siguiente ejemplo muestra tres cajas idénticas posicionadas de forma relativa (position: relative) y que sólo se diferencian en el valor de su propiedad bottom:
bottom: -10px;
}
bottom: 0;
}
bottom: 10px;
}
Los valores positivos en la propiedad bottom hacen que la caja suba respecto a su posición original. En otras palabras, la propiedad bottom: 10px se interpreta de la siguiente manera: "sube la caja hasta que su borde inferior quede a 10px de distancia de la posición que originalmente tenía ese borde inferior".
De la misma manera, los valores negativos en la propiedad bottom hacen que la caja baje respecto a su posición original. En otras palabras, la propiedad bottom: -10px se interpreta de la siguiente manera: "baja la caja hasta que su borde inferior quede a 10px de distancia de la posición que originalmente tenía ese borde inferior".
Para indicar el valor de la propiedad bottom puedes utilizar cualquiera de las medidas definidas por CSS. En el siguiente ejemplo, los valores 10px y -10px del ejemplo anterior se han reemplazado por 1em y -1em respecticamente. Este cambio hace que la caja suba/baje más o menos en función del propio tamaño de letra de esa caja:
bottom: 1em;
}
bottom: 0;
}
bottom: -1em;
}
Si el valor de la propiedad bottom se indica mediante porcentajes, su referencia es la altura de la caja que contiene a la caja que quieres mover, es decir, su caja padre. Por lo tanto, la propiedad bottom: 50% desplazaría la caja hacia arriba una distancia igual a la mitad de la altura de su caja padre. Por este motivo, los desplazamientos indicados en porcentaje no funcionan a menos que indiques explícitamente la altura de la caja padre.
En el siguiente ejemplo, el <div> que encierra a los tres <div> posicionados no tiene establecida ninguna altura, por lo que el valor de su propiedad height es auto. En este caso, el desplazamiento indicado en porcentajes no funciona y los tres <div> se ven igual:
bottom: 0;
}
bottom: 25%;
}
bottom: -25%;
}
Sin embargo, si en el mismo ejemplo anterior se establece explícitamente la altura del <div> padre a 80px, ahora sí que se aplica el desplazamiento a los <div> interiores (como la altura del <div> padre es 80px y el desplazamiento es 25%, las cajas se moverán 20px respecto de su posición original):
bottom: 0;
}
bottom: 25%;
}
bottom: -25%;
}
La propiedad bottom se puede utilizar por ejemplo para desplazar ligeramente los enlaces dentro de un texto cuando se pasa el ratón por encima:
(pasa el ratón por encima de los enlaces, sin pinchar en ellos)
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Fusce ut leo eu ipsum faucibus pretium. Donec iaculis lorem eleifend mi tempor porttitor. Integer porttitor dui vel dui. Donec ornare adipiscing pede. Proin elementum augue ut magna.
El código CSS utilizado en el ejemplo anterior es tan sencillo como:
a:hover {
position: relative;
bottom: 2px;
}Otro truco habitual es desplazar hacia abajo ligeramente los enlaces al pinchar sobre ellos:
(al pinchar los enlaces de este texto, se desplazan hacia abajo. Para poder ver bien el efecto, pincha sobre los enlaces pero no sueltes el ratón)
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Fusce ut leo eu ipsum faucibus pretium. Donec iaculis lorem eleifend mi tempor porttitor. Integer porttitor dui vel dui. Donec ornare adipiscing pede. Proin elementum augue ut magna.
El código CSS utilizado en el ejemplo anterior es tan sencillo como:
a:active {
position: relative;
bottom: -1px;
}Si el elemento que se quiere desplazar con la propiedad bottom está posicionado de forma absoluta (position: absolute), la interpretación del valor de la propiedad bottom es muy diferente. En este caso, el origen de coordenadas es el borde inferior de la caja que hace de referencia del posicionamiento absoluto, es decir, el borde inferior de la caja padre.
bottom: 0;
position: absolute;
}
bottom: 50px;
position: absolute;
}
bottom: -50px;
position: absolute;
}
Como se muestra en el ejemplo anterior, si el desplazamiento es excesivo, la caja desplazada puede salirse de los límites de la caja padre en la que está contenido.
Cuando el elemento que se desplaza está posicionado de forma absoluta, los valores de la propiedad bottom indicados mediante porcentajes se interpretan de la misma manera que en los elementos posicionados de forma relativa. Por tanto, si la caja padre tiene una altura de 300px y el desplazamiento es del 10%, en realidad la caja se está desplazando 30px:
bottom: 0;
position: absolute;
}
bottom: 10%;
position: absolute;
}
bottom: -10%;
position: absolute;
}