Superior

  • Enlace amigable (slug) de la revisión: CSS/top
  • Título de la revisión: Superior
  • Id de la revisión: 98345
  • Creada:
  • Creador: HenryGR
  • ¿Es la revisión actual? No
  • Comentario /* Summary */

Contenido de la revisión

{{wiki.template('Traducción', [ "inglés", "CSS:top", "en" ])}}


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


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

Syntax

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

Examples

 /* The body could be set using px unit also for the div to operate */
 body{
   width: 100%;
   height: 100%;
 }
 /* The div can now operate the settings with % unit (body w and h are set) */
 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">
       /* The body could be set using px unit also for the div to operate */
       body{
         width: 100%;
         height: 100%;
       }
       /* The div can now operate the settings with % unit (body w and h are set) */
       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>
             ...Some content...
        </div>
      </center>

   </body>
 </html>

Notes

top is the more relevant property than bottom because the browser window default is to valign to the top. With some position property settings the top property is irrelevant. Top and bottom settings can be used by DHTML for more than simply the div element.

Specifications

Browser compatibility

Browser Lowest Version
Internet Explorer ?
Firefox 1
Netscape ?
Opera ?
Safari ?

See also

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

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

Fuente de la revisión

<p>
</p><p>{{wiki.template('Traducción', [ "inglés", "CSS:top", "en" ])}}
</p><p><br>
</p><p>{{template.CSSRef()}}
</p>
<h3 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 {{template.Cssxref("position")}}<code>: absolute</code> ó {{template.Cssxref("position")}}<code>: fixed</code>), la propiedad <i>top</i> 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 {{template.Cssxref("position")}}<code>: relative</code>), la propiedad <i>top</i> especifica el desplazamiento hacia abajo que tendrá el elemento con respecto a su posición normal.
</p><p><br>
</p>
<ul><li> {{template.Xref_cssinitial()}}: {{template.Cssxref("auto")}}
</li><li> Aplicable a: <a href="es/CSS/position">positioned elements</a>
</li><li> {{template.Xref_cssinherited()}}: no
</li><li> Porcentajes: se refieren a la altura del bloque contenedor.
</li><li> Medio: {{template.Xref_cssvisual()}}
</li><li> {{template.Xref_csscomputed()}}: valor absoluto, porcentaje ó auto.
</li></ul>
<h3 name="Syntax"> Syntax </h3>
<pre class="eval">   top: &lt;length&gt; | &lt;percentage&gt; | auto | inherit
</pre>
<h3 name="Examples"> Examples </h3>
<pre> /* The body could be set using px unit also for the div to operate */
 body{
   width: 100%;
   height: 100%;
 }
 /* The div can now operate the settings with % unit (body w and h are set) */
 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;
       /* The body could be set using px unit also for the div to operate */
       body{
         width: 100%;
         height: 100%;
       }
       /* The div can now operate the settings with % unit (body w and h are set) */
       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;
             ...Some content...
        &lt;/div&gt;
      &lt;/center&gt;

   &lt;/body&gt;
 &lt;/html&gt;
</pre>
<h3 name="Notes"> Notes </h3>
<p><code>top</code> is the more relevant property than bottom because the browser window default is to valign to the top.
With some position property settings the top property is irrelevant.
Top and bottom settings can be used by DHTML for more than simply the div element.
</p>
<h3 name="Specifications"> Specifications </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 name="Browser_compatibility"> Browser compatibility </h3>
<table class="standard-table">
  <tbody><tr>
    <th>Browser</th>
    <th>Lowest Version</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 name="See_also"> See also </h3>
<p>{{template.Cssxref("position")}}, {{template.Cssxref("right")}}, {{template.Cssxref("bottom")}}, {{template.Cssxref("left")}}
</p>
<div class="noinclude">
</div>
{{ wiki.languages( { "en": "en/CSS/top" } ) }}
Revertir a esta revisión