bottom

<< Volver

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.

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"
   "http://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