Skip to main content

Visit Mozilla.org

CSS:top

De MDC


Imagen:traduccion-pendiente.png Esta página está traduciéndose a partir del artículo CSS:top, razón por la cual puede haber algunos errores sintácticos o partes sin traducir. Puedes colaborar continuando con la traducción


« Referencia CSS

[editar] Sumario

La propiedad top 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 ó position: fixed), la propiedad top determina la distancia entre el borde superior del elemento y el borde superior de su bloque contenedor.

Para los elementos con una posición relativa (aquellos que tienen la propiedad position: relative), la propiedad top especifica el desplazamiento hacia abajo que tendrá el elemento con respecto a su posición normal.


[editar] Sintaxis 

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

[editar] Ejemplos 

 /* se puede también usar unidades px para posicionar body para luego operar con el div */
 body{
   width: 100%;
   height: 100%;
 }
 /* ahora podemos operar con unidades de porcentajes (con respecto al 100% del body) */
 div{
   position:absolute;
   left:15%;
   top:30%;
   bottom:30%;
   width:70%;
   height:40%;
   text-align:left;
   border: 3px rgb(0,0,0) solid;
 }

 <?xml version="1.0" encoding="utf-8"?>
 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
           "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 <html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
   <head>
     <meta http-equiv="Content-Type" content="application/xhtml+xml" />
     <title>Mozzila.org height top left width percentage CSS</title>
     <style type="text/css">
       /* se puede también usar unidades px para posicionar body para luego operar con el div */
       body{
         width: 100%;
         height: 100%;
       }
       /* ahora podemos operar con unidades de porcentajes (con respecto al 100% del body) */
       div{
         position:absolute;
         left:15%;
         top:30%;
         bottom:30%;
         width:70%;
         height:40%;
         text-align:left;
         border: 3px rgb(0,0,0) solid;
       }
     </style>
   </head>
   <body>
      <center>
        <div>
             ...Contenido...
        </div>
      </center>

   </body>
 </html>

[editar] Notas

La propiedad top es más relevante que la propiedad bottom porque el navegador tiene por defecto la propiedad valign puesta a top. Cuando se establece alguna propiedad de posicionamiento, la propiedad top es irrelevante. Las propiedades top y bottom, pueden ser usadas por DHTML para más funciones que simplemente posicionar un elemento.

[editar] Especificaciones

[editar] Compatibilidad entre navegadores

Navegador Versión mínima
Internet Explorer ?
Firefox 1
Netscape ?
Opera ?
Safari ?

[editar] Ver también

position, right, bottom, left

Obtenido de "http://developer.mozilla.org/es/docs/CSS:top"