mozilla
Los resultados de tu búsqueda

    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

    Etiquetas y colaboradores del documento

    Contributors to this page: teoli, HenryGR, Mgjbot, Nathymig
    Última actualización por: teoli,