Join MDN and developers like you at Mozilla's View Source conference, 12-14 September in Berlin, Germany. Learn more at https://viewsourceconf.org

 

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

 

Sumario

La propiedad top especifica parte de la posición de un elemento posicionado. No tiene efecto en elementos no posicionados.

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

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

Cuando se define tanto la propiedad top como bottom para un elemento, y  height no se ha definido, tiene un valor auto o 100%, tanto la distancia top como bottom se respetan. Si height está definida, la aplicación de la propiedad top tiene precedencia y bottom será ignorada.

Sintaxis

   top: <longitud> | <porcentaje> | auto | inherit

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 al 100% delrespecto  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>

 

Especificaciones

Compatibilidad entre navegadores

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

Ver también

position, right, bottom, left

Etiquetas y colaboradores del documento

 Colaboradores en esta página: davidgg, solemoris, teoli, lcamacho, jaumesvdevelopers, HenryGR, Mgjbot
 Última actualización por: davidgg,