bottom
======

La propiedad **`bottom`** de CSS establece la posición vertical de un elemento posicionado. No tiene efecto en elementos no posicionados.

Pruébalo
--------

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.

Sintaxis
--------


```css
/\* <longitud> valores \*/
bottom: 3px;
bottom: 2.4em;

/\* <porcentaje>s de la altura del bloque contenedor \*/
bottom: 10%;

/\* valor de palabra clave \*/
bottom: auto;

/\* Valores globales \*/
bottom: inherit;
bottom: initial;
bottom: revert;
bottom: revert-layer;
bottom: unset;
```

### Valores

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

Definición formal
-----------------

|  |  |
| --- | --- |
| Valor inicial | `auto` |
| Applies to | positioned elements |
| Heredable | no |
| Percentages | refer to the height of the containing block |
| Valor calculado | if specified as a length, the corresponding absolute length; if specified as a percentage, the specified value; otherwise, `auto` |
| Animation type | a length, percentage or calc(); |

Sintaxis formal
---------------
```

bottom =   
  auto                 |  
  <length-percentage>    
  
<length-percentage> =   
  <length>      |  
  <percentage>    
  
```

Ejemplos
--------

### Posicionamiento absoluto y fijo

Este ejemplo demuestra la diferencia en el comportamiento de la propiedad `bottom`, cuando la `position` es `absolute` versus `fixed`.

#### HTML


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


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

Especificaciones
----------------

| Specification |
| --- |
| CSS Positioned Layout Module Level 3 # insets |

Compatibilidad con navegadores
------------------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

Véase también
-------------

* `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`