bottom

Resumen

La propiedad bottom especifica parte de la posición de un elemento (posicionado - es decir, con una posición determinada por código).

Para los elementos con una posición absoluta (aquellos que tienen la propiedad position: absolute o position: fixed), la propiedad bottom determina la distancia entre el borde inferior del elemento y el borde inferior de su bloque contenedor.

Para los elementos con una posición relativa (los que tienen la propiedad position: relative), la propiedad bottom determina la distancia que el elemento se mueve hacia arriba desde su posición normal. Sin embargo, la propiedad top se antepone a la propiedad bottom, por lo que si top no es auto, el valor computado de bottom es el valor negativo del valor computado de top.

valor inicial: automático
Se aplica a: la posición de los elementos
heredado: no
Porcentajes: se refieren a la altura del bloque contenedor.
Medio: visual
valor calculada: valor absoluto, porcentaje o auto.

Sintaxis

   bottom: <length> | <percentage> | auto | inherit

Valores

<length>: Una longitud, usada como se describe en el resumen. Puede ser un valor negativo, cero o un valor positivo.
<percentage>: Un porcentaje de la altura del bloque contenedor, usado como se describe en el resumen.
auto: Para los elementos con posición absoluta, el elemento se posiciona en base a la propiedad top y por tanto se trata height: auto como una altura basada en el contenido del elemento. Para los elementos posicionados como relativos, especifica un desplazamiento desde su posición normal basada en la propiedad top o si, top es también auto, no se produce desplazamiento alguno.
inherit: Recoge el valor que tenga el elemento padre (que puede no ser el bloque contenedor). Este valor calculado es tratado como si fuera un valor <length>, <percentage> o auto.

Ejemplos

element { 
    position: absolute;
    bottom: 20px; 
    height: 200px;
    border: 1px solid #000;
}

El siguiente ejemplo permite contrastar entre position:absolute y position:fixed. Cuando el texto ocupa un espacio más alto que la porción visible de la página (la porción visible en la ventana del navegador) los bloques posicionados con position:absolute se desplazarán junto con la página, mientras que los bloques posicionados con position:fixed, no lo harán.

Atención: IE6 no soporta el código position:fixed.

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" 
   "https://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
<title>Position at bottom, absolute or fixed</title>
<style type="text/css">
p {font-size:30px; line-height:3em;}
div.pos {width:49%; text-align:center; border:2px solid #00f;}
div#abs {position:absolute; bottom:0; left:0;}
div#fix {position:fixed; bottom:0; right:0;}
</style>
</head>
<body>
  <p>Esto<br>es<br>un texto<br>alto,<br>alto,
    <br>alto,<br>alto,<br>alto<br>de prueba.</p>
  <div id="fix" class="pos"><p>Fixed</p></div>
  <div id="abs" class="pos"><p>Absolute</p></div>
</body>
</html>

Notas

Para los elementos posicionados de forma absoluta cuyo bloque contenedor sea un elemento de tipo bloque, esta propiedad es un desplazamiento a partir del borde de relleno (padding) de dicho elemento.

Para los elementos posicionados de forma absoluta, la propiedad bottom no tiene efectos visibles cuando los valores top, height, y margin-top no son auto (que es el valor por defecto para top y height).

Especificaciones

Compatibilidad entre navegadores

This is as far back as the documentaion goes.

Navegador	Versión mínima
Internet Explorer	5
Firefox	1
Netscape	6
Opera	6

Ver también

position, top, right, left

Categorías

Interwiki Languages