MDN may have intermittent access issues April 18 13:00 - April 19 01:00 UTC. See whistlepig.mozilla.org for all notifications.

mozilla

Revision 20276 of top

  • Revision slug: CSS/top
  • Revision title: top
  • Revision id: 20276
  • Created:
  • Creator: fscholz
  • Is current revision? No
  • Comment +de; 10 words added, 26 words removed

Revision Content

{{ CSSRef() }}

Summary

The top property specifies part of the position of positioned elements.

For absolutely positioned elements (those with {{ Cssxref("position") }}: absolute or {{ Cssxref("position") }}: fixed), it specifies the distance between the top margin edge of the element and the top edge of its containing block.

For relatively positioned elements (those with {{ Cssxref("position") }}: relative), it specifies the amount the element is moved below its normal position.

  • {{ Xref_cssinitial() }}: {{ Cssxref("auto") }}
  • Applies to: positioned elements
  • {{ Xref_cssinherited() }}: no
  • Percentages: refer to height of containing block
  • Media: {{ Xref_cssvisual() }}
  • {{ Xref_csscomputed() }}: absolute length, percentage, or 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

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

{{ languages( { "es": "es/CSS/top", "de": "de/CSS/top" } ) }}

Revision Source

<p>{{ CSSRef() }}</p>
<h3 name="Summary">Summary</h3>
<p>The <code>top</code> property specifies part of the position of positioned elements.</p>
<p>For absolutely positioned elements (those with {{ Cssxref("position") }}<code>: absolute</code> or {{ Cssxref("position") }}<code>: fixed</code>), it specifies the distance between the top margin edge of the element and the top edge of its containing block.</p>
<p>For relatively positioned elements (those with {{ Cssxref("position") }}<code>: relative</code>), it specifies the amount the element is moved below its normal position.</p>
<ul> <li>{{ Xref_cssinitial() }}: {{ Cssxref("auto") }}</li> <li>Applies to: <a href="/en/CSS/position" title="en/CSS/position">positioned elements</a></li> <li>{{ Xref_cssinherited() }}: no</li> <li>Percentages: refer to height of containing block</li> <li>Media: {{ Xref_cssvisual() }}</li> <li>{{ Xref_csscomputed() }}: absolute length, percentage, or 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>{{ Cssxref("position") }}, {{ Cssxref("right") }}, {{ Cssxref("bottom") }}, {{ Cssxref("left") }}</p>

<p>{{ languages( { "es": "es/CSS/top", "de": "de/CSS/top" } ) }}</p>
Revert to this revision