Propiedad CSS bottom
La propiedad CSS bottom especifica la posición inferior de un elemento junto con la propiedad position. Encuentra ejemplos y pruébalo tú mismo.
La propiedad CSS bottom establece la posición vertical de un elemento posicionado en relación con su bloque contenedor. Solo funciona cuando el elemento tiene un valor de position distinto de static, y un valor positivo empuja el borde inferior del elemento hacia arriba, alejándolo del borde inferior de su caja de referencia.
Nota: La propiedad bottom no tiene efecto en elementos con position: static (el valor por defecto), por lo que nada ocurrirá hasta que también establezcas position.
Cómo el posicionamiento cambia el efecto
La caja de referencia desde la que bottom mide depende completamente del valor de position del elemento:
relative—bottomdesplaza el elemento desde su posición normal.bottom: 20pxlo mueve 20px hacia arriba desde donde estaría de otro modo, sin afectar el diseño de los elementos circundantes.absolute— el elemento se posiciona en relación con su ancestro posicionado más cercano (un ancestro cuyapositionno seastatic).bottom: 0lo ancla al borde inferior de ese ancestro.fixed— el elemento se posiciona en relación con el viewport y permanece fijo mientras la página se desplaza.sticky— el elemento se comporta comorelativehasta que su contenedor de desplazamiento alcanza un umbral, tras el cual se comporta comofixed.
bottom vs. top
Si tanto top como bottom están establecidos en el mismo elemento, top tiene prioridad cuando el elemento tiene una altura fija (para position: absolute/fixed), porque top se resuelve primero. Si la altura es auto, establecer tanto top como bottom estira el elemento para llenar el espacio entre los dos desplazamientos — una forma práctica de hacer que una caja posicionada absolutamente sea tan alta como su contenedor sin especificar una altura.
Valores de porcentaje
Un bottom en porcentaje se calcula a partir de la altura del bloque contenedor, no del elemento en sí. Si el bloque contenedor no tiene una altura explícita, los desplazamientos en porcentaje pueden resolverse como 0 o ignorarse, por lo que es preferible usar unidades de longitud (px, em, rem) cuando la altura del padre es desconocida.
| Valor inicial | auto |
|---|---|
| Se aplica a | Todos los elementos. También se aplica a ::first-letter. |
| Heredado | No. |
| Animable | Sí. La posición inferior puede ser animable. |
| Versión | CSS2 |
| Sintaxis DOM | object.style.bottom = "10px"; |
Sintaxis
Sintaxis de la propiedad CSS bottom
bottom: auto | length | percentage | initial | inherit;Ejemplo de la propiedad bottom:
Ejemplo de la propiedad CSS bottom con valor position absolute
<!DOCTYPE html>
<html>
<head>
<style>
div.parent {
position: relative;
height: 300px;
width: 80%;
border: 3px solid #8ebf42;
}
div.absolute {
position: absolute;
width: 50%;
bottom: 10px;
border: 3px solid #8ebf42;
}
</style>
</head>
<body>
<h2>Bottom property example</h2>
<div class="parent">
The position of this div is set to relative.
<div class="absolute">This div's bottom edge is placed 10 pixels above the bottom edge of the containing element, and the position is set to absolute.</div>
</div>
</body>
</html>Resultado
Ejemplo de la propiedad bottom con todas las posiciones:
Ejemplo de la propiedad CSS bottom con todas las posiciones
<!DOCTYPE html>
<html>
<head>
<style>
div.parent {
position: relative;
height: 180px;
border: 3px solid #8AC007;
}
div.absolute {
position: absolute;
width: 50%;
bottom: 20px;
border: 3px solid #8AC007;
}
div.relative {
position: relative;
width: 50%;
bottom: 2px;
border: 3px solid #8AC007;
}
div.fixed {
position: fixed;
width: 50%;
bottom: 50px;
border: 3px solid #8AC007;
}
div.sticky {
position: sticky;
top: 0;
width: 50%;
bottom: 10px;
border: 3px solid #8AC007;
}
</style>
</head>
<body>
<h2>Bottom property example</h2>
<div class="parent">
This div element has position: relative.
<div class="absolute"><strong>position: absolute and bottom 20px</strong>
<br />This div's bottom edge is placed 20 pixels above the bottom edge of the containing element.</div>
</div>
<br />
<div class="parent">
This div element has position: relative.
<div class="relative"><strong>position: relative and bottom 2px</strong>
<br />This div's bottom edge is placed 2 pixels above its normal position.</div>
</div>
<br />
<div class="fixed"><strong>position: fixed and bottom 50px</strong>
<br />This div's bottom edge is placed 50 pixels from the bottom of the viewport.</div>
<div class="parent">
This div element has position: relative.
<div class="sticky"><strong>position: sticky and bottom 10px</strong>
<br />This div is sticky.</div>
</div>
</body>
</html>Valores
| Valor | Descripción | Pruébalo |
|---|---|---|
| auto | Este es el valor por defecto. Permite al navegador calcular la posición del borde inferior. | Pruébalo » |
| percentage | Define la posición del elemento en porcentajes de la altura del bloque contenedor. | |
| length | Define la posición del elemento en px, cm, etc. Se permiten valores negativos. | Pruébalo » |
| initial | Establece la propiedad en su valor por defecto. | Pruébalo » |
| inherit | Hereda la propiedad de su elemento padre. |
Propiedades relacionadas
El desplazamiento bottom es una de las cuatro propiedades de desplazamiento de caja que funcionan junto con position:
- top — establece el desplazamiento vertical desde el borde superior de la caja de referencia.
- left — establece el desplazamiento horizontal desde el borde izquierdo.
- right — establece el desplazamiento horizontal desde el borde derecho.
Un patrón común es anclar un elemento a una esquina, por ejemplo position: absolute; bottom: 0; right: 0; para fijar una insignia en la esquina inferior derecha de su contenedor.