top

  • Revision slug: Web/CSS/top
  • Revision title: top
  • Revision id: 502287
  • Created:
  • Creator: teoli
  • Is current revision? No
  • Comment

Revision Content

{{CSSRef}}

Summary

The top CSS property specifies part of the position of positioned elements. It has no effect on non-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.

When both top and {{cssxref("bottom")}} are specified, the element position is over-constrained and the top property has precedence: the computed value of bottom is set to -top, while its specified value is ignored.

{{cssbox("top")}}

Syntax

Formal syntax: {{csssyntax("top")}}
top: 3px         /* <length> values */
top: 2.4em

top: 10%         /* <percentages> of the height of the containing block */

top: auto

top: inherit

Values

<length>
Is a negative, null or positive {{ xref_csslength() }} that represents:
  • for absolutely positioned elements, the distance to the top edge of the containing block;
  • for relatively positioned elements, the offset that the element is moved below its position in the normal flow if it wasn't positioned.
<percentage>
Is a {{ xref_csspercentage() }} of the containing block's height, used as described in the summary.
auto
Is a keyword that represents:
  • for absolutely positioned elements, the position the element based on the {{ Cssxref("bottom") }} property and treat height: auto as a height based on the content.
  • for relatively positioned elements, the offset the element from its original position based on the {{ Cssxref("bottom") }} property, or if bottom is also auto, do not offset it at all.
inherit
Is a keyword indicating that the value is the same than the computed value from its parent element (which may not be its containing block). This computed value is then handled like it was a {{ xref_csslength() }}, {{ xref_csspercentage() }} or the auto keyword.

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>Mozilla.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>

Specifications

Specification Status Comment
{{SpecName('CSS3 Transitions', '#animatable-css', 'top')}} {{Spec2('CSS3 Transitions')}} Defines top as animatable.
{{SpecName('CSS2.1', 'visuren.html#propdef-top', 'top')}} {{Spec2('CSS2.1')}} Initial specification

Browser compatibility

{{CompatibilityTable}}

Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari
Basic support {{CompatVersionUnknown}} {{CompatGeckoDesktop("1")}} {{CompatVersionUnknown}} {{CompatVersionUnknown}} {{CompatVersionUnknown}}
Feature Android Chrome for Android Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
Basic support {{CompatUnknown}} {{CompatUnknown}} {{CompatUnknown}} {{CompatUnknown}} {{CompatUnknown}} {{CompatUnknown}}

See also

  • {{CSS_Reference:Position}}

Revision Source

<div>
 {{CSSRef}}</div>
<h2 id="Summary" name="Summary">Summary</h2>
<p>The <code>top</code> CSS property specifies part of the position of positioned elements. It has no effect on non-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>
<p>When both <code>top</code> and {{cssxref("bottom")}} are specified, the element position is over-constrained and the <code>top</code> property has precedence: the computed value of <code>bottom</code> is set to <code>-top</code>, while its specified value is ignored.</p>
<p>{{cssbox("top")}}</p>
<h2 id="Syntax" name="Syntax">Syntax</h2>
<pre class="twopartsyntaxbox">
<a href="/en-US/docs/CSS/Value_definition_syntax" title="CSS/Value_definition_syntax">Formal syntax</a>: {{csssyntax("top")}}
</pre>
<pre>
top: 3px         /* &lt;length&gt; values */
top: 2.4em

top: 10%         /* &lt;percentages&gt; of the height of the containing block */

top: auto

top: inherit
</pre>
<h3 id="Values">Values</h3>
<dl>
 <dt>
  <code>&lt;length&gt;</code></dt>
 <dd>
  Is a negative, null or positive {{ xref_csslength() }} that represents:
  <ul>
   <li>for <em>absolutely positioned elements</em>, the distance to the top edge of the containing block;</li>
   <li>for <em>relatively positioned elements</em>, the offset that the element is moved below its position in the normal flow if it wasn't positioned.</li>
  </ul>
 </dd>
 <dt>
  <code>&lt;percentage&gt;</code></dt>
 <dd>
  Is a {{ xref_csspercentage() }} of the containing block's height, used as described in the <a href="#Summary">summary</a>.</dd>
 <dt>
  <code>auto</code></dt>
 <dd>
  Is a keyword that represents:
  <ul>
   <li>for absolutely positioned elements, the position the element based on the {{ Cssxref("bottom") }} property and treat <code>height: auto</code> as a height based on the content.</li>
   <li>for relatively positioned elements, the offset the element from its original position based on the {{ Cssxref("bottom") }} property, or if <code>bottom</code> is also <code>auto</code>, do not offset it at all.</li>
  </ul>
 </dd>
 <dt>
  <code>inherit</code></dt>
 <dd>
  Is a keyword indicating that the value is the same than the computed value from its parent element (which may not be its containing block). This computed value is then handled like it was a {{ xref_csslength() }}, {{ xref_csspercentage() }} or the <code>auto</code> keyword.</dd>
</dl>
<h2 id="Examples" name="Examples">Examples</h2>
<pre class="brush: 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&nbsp;% 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 class="brush: html">
 &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;Mozilla.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&nbsp;% 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>
<h2 id="Specifications" name="Specifications">Specifications</h2>
<table class="standard-table">
 <thead>
  <tr>
   <th scope="col">Specification</th>
   <th scope="col">Status</th>
   <th scope="col">Comment</th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <td>{{SpecName('CSS3 Transitions', '#animatable-css', 'top')}}</td>
   <td>{{Spec2('CSS3 Transitions')}}</td>
   <td>Defines <code>top</code> as animatable.</td>
  </tr>
  <tr>
   <td>{{SpecName('CSS2.1', 'visuren.html#propdef-top', 'top')}}</td>
   <td>{{Spec2('CSS2.1')}}</td>
   <td>Initial specification</td>
  </tr>
 </tbody>
</table>
<h2 id="Browser_compatibility" name="Browser_compatibility">Browser compatibility</h2>
<p>{{CompatibilityTable}}</p>
<div id="compat-desktop">
 <table class="compat-table">
  <tbody>
   <tr>
    <th>Feature</th>
    <th>Chrome</th>
    <th>Firefox (Gecko)</th>
    <th>Internet Explorer</th>
    <th>Opera</th>
    <th>Safari</th>
   </tr>
   <tr>
    <td>Basic support</td>
    <td>{{CompatVersionUnknown}}</td>
    <td>{{CompatGeckoDesktop("1")}}</td>
    <td>{{CompatVersionUnknown}}</td>
    <td>{{CompatVersionUnknown}}</td>
    <td>{{CompatVersionUnknown}}</td>
   </tr>
  </tbody>
 </table>
</div>
<div id="compat-mobile">
 <table class="compat-table">
  <tbody>
   <tr>
    <th>Feature</th>
    <th>Android</th>
    <th>Chrome for Android</th>
    <th>Firefox Mobile (Gecko)</th>
    <th>IE Mobile</th>
    <th>Opera Mobile</th>
    <th>Safari Mobile</th>
   </tr>
   <tr>
    <td>Basic support</td>
    <td>{{CompatUnknown}}</td>
    <td>{{CompatUnknown}}</td>
    <td>{{CompatUnknown}}</td>
    <td>{{CompatUnknown}}</td>
    <td>{{CompatUnknown}}</td>
    <td>{{CompatUnknown}}</td>
   </tr>
  </tbody>
 </table>
</div>
<h2 id="See_also" name="See_also">See also</h2>
<ul>
 <li>{{CSS_Reference:Position}}</li>
</ul>
Revert to this revision