Superior

  • Enlace amigable (slug) de la revisión: CSS/top
  • Título de la revisión: Superior
  • Id de la revisión: 98357
  • Creada:
  • Creador: lcamacho
  • ¿Es la revisión actual?
  • Comentario 1 words added, 1 words removed

Contenido de la revisión

 

{{ Traducción("inglés", "CSS:Top", "en") }}

 

{{ CSSRef() }}

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 {{ Cssxref("top") }}: absolute ó {{ Cssxref("top") }}: 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 {{ Cssxref("top") }}: relative), la propiedad superior especifica el desplazamiento hacia abajo que tendrá el elemento con respecto a su posición normal.

 

  • {{ Xref_cssinitial() }}: {{ Cssxref("auto") }}
  • Aplicable a: Posicionar Elementos
  • {{ Xref_cssinherited() }}: no
  • Porcentajes: se refieren a la altura del bloque contenedor.
  • Medio: {{ Xref_cssvisual() }}
  • {{ Xref_csscomputed() }}: valor absoluto, porcentaje ó auto.

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>

Notas

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

Especificaciones

Compatibilidad entre navegadores

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

Ver también

{{ Cssxref("position") }}, {{ Cssxref("right") }}, {{ Cssxref("bottom") }}, {{ Cssxref("left") }}

{{ languages( { "en": "en/CSS/top" } ) }}

Fuente de la revisión

<p> </p>
<p>{{ Traducción("inglés", "CSS:Top", "en") }}</p>
<p> </p>
<p>{{ CSSRef() }}</p>
<h3 id="Sumario" name="Sumario">Sumario</h3>
<p>La propiedad <code>top</code> especifica parte de la posición de un elemento (posicionado - es decir, con una posición determinada por código).</p>
<p>Para los elementos con una posición absoluta (aquellos que tienen la propiedad {{ Cssxref("top") }}<code>: absolute</code> ó {{ Cssxref("top") }}<code>: fixed</code>), la propiedad <em>top</em> determina la distancia entre el borde superior del elemento y el borde superior de su bloque contenedor.</p>
<p>Para los elementos con una posición relativa (aquellos que tienen la propiedad {{ Cssxref("top") }}<code>: relative</code>), la propiedad <span style="font-style: italic;">superior</span> especifica el desplazamiento hacia abajo que tendrá el elemento con respecto a su posición normal.</p>
<p> </p>
<ul> <li>{{ Xref_cssinitial() }}: {{ Cssxref("auto") }}</li> <li>Aplicable a: <a href="/es/CSS/position" title="es/CSS/position">Posicionar Elementos</a></li> <li>{{ Xref_cssinherited() }}: no</li> <li>Porcentajes: se refieren a la altura del bloque contenedor.</li> <li>Medio: {{ Xref_cssvisual() }}</li> <li>{{ Xref_csscomputed() }}: valor absoluto, porcentaje ó auto.</li>
</ul>
<h3 id="Sintaxis" name="Sintaxis">Sintaxis</h3>
<pre class="eval">   top: &lt;longitud&gt; | &lt;porcentaje&gt; | auto | inherit
</pre>
<h3 id="Ejemplos" name="Ejemplos">Ejemplos</h3>
<pre> /* 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;
 }
</pre>
<pre> &lt;?xml version="1.0" encoding="utf-8"?&gt;
 &lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
           "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;
 &lt;html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en"&gt;
   &lt;head&gt;
     &lt;meta http-equiv="Content-Type" content="application/xhtml+xml" /&gt;
     &lt;title&gt;Mozzila.org height top left width percentage CSS&lt;/title&gt;
     &lt;style type="text/css"&gt;
       /* 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;
       }
     &lt;/style&gt;
   &lt;/head&gt;
   &lt;body&gt;
      &lt;center&gt;
        &lt;div&gt;
             ...Contenido...
        &lt;/div&gt;
      &lt;/center&gt;

   &lt;/body&gt;
 &lt;/html&gt;
</pre>
<h3 id="Notas" name="Notas">Notas</h3>
<p>La propiedad <code>top</code> es más relevante que la propiedad <code>background</code> porque el navegador tiene por defecto la propiedad valign con valor top. Cuando se establece alguna propiedad de posicionamiento, la propiedad top es irrelevante. Las propiedades top y background, pueden ser usadas por DHTML para más funciones que simplemente posicionar un elemento.</p>
<h3 id="Especificaciones" name="Especificaciones">Especificaciones</h3>
<ul> <li><a class="external" href="http://www.w3.org/TR/CSS21/visuren.html#propdef-top">CSS 2.1</a></li> <li><a class="external" href="http://www.w3.org/Style/CSS/current-work#positioning">CSS 3</a></li>
</ul>
<h3 id="Compatibilidad_entre_navegadores" name="Compatibilidad_entre_navegadores">Compatibilidad entre navegadores</h3>
<table class="standard-table"> <tbody> <tr> <th>Navegador</th> <th>Versión mínima</th> </tr> <tr> <td>Internet Explorer</td> <td>?</td> </tr> <tr> <td>Firefox</td> <td>1</td> </tr> <tr> <td>Netscape</td> <td>?</td> </tr> <tr> <td>Opera</td> <td>?</td> </tr> <tr> <td>Safari</td> <td>?</td> </tr> </tbody>
</table>
<h3 id="Ver_tambi.C3.A9n" name="Ver_tambi.C3.A9n">Ver también</h3>
<p>{{ Cssxref("position") }}, {{ Cssxref("right") }}, {{ Cssxref("bottom") }}, {{ Cssxref("left") }}</p>
<p>{{ languages( { "en": "en/CSS/top" } ) }}</p>
Revertir a esta revisión