Want to share your CSS expertise with others? Apply to the MDN Fellowship by April 1! http://mzl.la/MDNFellowship

mozilla

Revision 515611 of position

  • Revision slug: Web/CSS/position
  • Revision title: position
  • Revision id: 515611
  • Created:
  • Creator: appsforartists
  • Is current revision? No
  • Comment Noting that sticky positioning requires top, right, bottom, or left to behave as expected and linking to a demo.

Revision Content

{{CSSRef}}

Summary

The position CSS property chooses alternative rules for positioning elements, designed to be useful for scripted animation effects.

{{cssbox("position")}}

A positioned element is an element whose computed position property is relative, absolute, fixed or sticky.

An absolutely positioned element is an element whose computed position property is absolute or fixed.

An relatively positioned element is an element whose computed position property is relative.

A stickily positioned element is an element whose computed position property is sticky.

The {{Cssxref("top")}}, {{Cssxref("right")}}, {{Cssxref("bottom")}}, and {{Cssxref("left")}} properties specify the position of positioned elements.

Syntax

Formal syntax: {{csssyntax("position")}}
position: static
position: relative
position: absolute
position: fixed
position: sticky

position: inherit

Values

static
This keyword let the element use the normal behavior, that is it is laid out in its current position in the flow.  The top, right, bottom, and left properties do not apply.
relative
This keyword lays out all elements as though the element were not positioned, and then adjust the element's position, without changing layout (and thus leaving a gap for the element where it would have been had it not been positioned). The effect of position:relative on table-*-group, table-row, table-column, table-cell, and table-caption elements is undefined.
absolute
Do not leave space for the element. Instead, position it at a specified position relative to its closest positioned ancestor or to the containing block. Absolutely positioned boxes can have margins, they do not collapse with any other margins.
fixed
Do not leave space for the element. Instead, position it at a specified position relative to the screen's viewport and doesn't move when scrolled. When printing, position it at that fixed position on every page.
sticky {{Experimental_inline}}
The box position is calculated according to the normal flow (this is called the position in normal flow). Then the box is offset relative to its flow root and containing block and in all cases, including table elements, does not affect the position of any following boxes. When a box B is stickily positioned, the position of the following box is calculated as though B were not offset. The effect of ‘position: sticky’ on table elements is the same as for ‘position: relative’.

Examples

Relative positioning

To position an element relatively 20px from the top and left of its normal position, the following CSS is used.

#two { position: relative; top: 20px; left: 20px; }

Note how the other elements are displayed as if "Two" were in its normal position and taking up space.

Absolute positioning

Elements that are positioned relatively are still considered to be in the normal flow of elements in the document. In contrast, an element that is positioned absolutely is taken out of the flow and thus takes up no space when placing other elements. The absolutely positioned element is positioned relative to nearest positioned ancestor. If a positioned ancestor doesn't exist, the initial container is used.

In the example below, the blue ancestor div is positioned relative (so it becomes the nearest positioned ancestor) and box Two is positioned absolutely:

#ancestor { position: relative; background: #ddf; width: 500px; }
#two { position: absolute; top: 20px; left: 20px; }

If #ancestor had not been positioned relative, box Two would have appeared relative to the upper left corner of the page.

Fixed positioning

Fixed positioning is similar to absolute positioning, with the exception that the element's containing block is the viewport. This is often used to create a floating element that stays in the same position even after scrolling the page. In the example below the "One" box is fixed 80px from the top of the page and 20px from the left:

#one { position: fixed; top: 80px; left: 20px; }

When viewing the top of the page, the position box appears in the upper left, and after scrolling, it remains in the same place relative to the viewport:

fixed-1.png

fixed-2.png

Sticky positioning

Sticky positioning is a hybrid of relative and fixed positioning.  The element is treated as relative positioned until it crosses a specified threshold, at which point it is treated as fixed positioned.  For instance:

#one { position: sticky; top: 10px; }
will behave just like a relatively positioned element until the viewport scrolls such that the element would be less than 10px from the top.  Then, it will be fixed to 10px from the top until the viewport is scrolled back passed this threshold.
 
Sticky positioning is commonly used for the headings in an alphabetized listing.  The B heading will appear just below the items that begin with A until they are scrolled offscreen.  Rather than sliding offscreen with the rest of the content, the B heading will then remain fixed to the top of the viewport until all the B items have scrolled offscreen, at which point it will be covered up by the C heading.
 
 
You must specify a threshold with at least one of {{Cssxref("top")}}, {{Cssxref("right")}}, {{Cssxref("bottom")}}, or {{Cssxref("left")}} for sticky positioning to behave as expected.  Otherwise, it will be indistinguishable from relative positioning.
 

Notes

For relatively positioned elements, the {{Cssxref("top")}} or {{Cssxref("bottom")}} property specifies the vertical offset from the normal position and the {{Cssxref("left")}} or {{Cssxref("right")}} property specifies the horizontal offset.

For absolutely positioned elements, the {{Cssxref("top")}}, {{Cssxref("right")}}, {{Cssxref("bottom")}}, and {{Cssxref("left")}} properties specify offsets from the edge of the element's containing block (what the element is positioned relative to). The margin of the element is then positioned inside these offsets.

Most of the time, absolutely positioned elements have auto values of {{Cssxref("height")}} and {{Cssxref("width")}} computed to fit the contents of the element. However, non-replaced absolutely positioned elements can be made to fill the available space by specifying (as other than auto) both {{Cssxref("top")}} and {{Cssxref("bottom")}} and leaving {{Cssxref("height")}} unspecified (that is, auto). Likewise for {{Cssxref("left")}}, {{Cssxref("right")}}, and {{Cssxref("width")}}.

Except for the case just described of absolutely positioned elements filling the available space:

  • If both {{Cssxref("top")}} and {{Cssxref("bottom")}} are specified (technically, not auto), {{Cssxref("top")}} wins.
  • If both {{Cssxref("left")}} and {{Cssxref("right")}} are specified, {{Cssxref("left")}} wins when {{Cssxref("direction")}} is ltr (English, horizontal Japanese, etc.) and {{Cssxref("right")}} wins when {{Cssxref("direction")}} is rtl (Persian, Arabic, Hebrew, etc.).

Specifications

Specification Status Comment
{{SpecName('CSS2.1', 'visuren.html#propdef-position', 'position')}} {{Spec2('CSS2.1')}}  
{{SpecName('CSS3 Positioning')}} {{Spec2('CSS3 Positioning')}} Adds sticky property value

Browser compatibility

{{CompatibilityTable}}
Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari (WebKit)
Basic support 1.0 1.0 (1.0) ({{anch("Gecko notes", "See notes")}}) 4.0 4.0 1.0 (85)
fixed value 1.0 1.0 (1.0) 7.0 4.0 1.0 (85)
sticky value {{CompatVersionUnknown()}} 26 (26.0) ({{anch("Gecko notes", "See notes")}}) {{CompatUnknown}} {{CompatUnknown}} 6.1 {{ property_prefix("-webkit-") }}
Feature Android Firefox Mobile (Gecko) IE Phone Opera Mobile Safari Mobile
Basic support {{CompatUnknown}} 1.0 (1.0) ({{anch("Gecko notes", "See notes")}}) {{CompatUnknown}} {{CompatUnknown}} {{CompatUnknown}}

Gecko notes

In Gecko, if you have a positioned {{HTMLElement("table")}} element inside a positioned block element, such as a {{HTMLElement("div")}}, a position: absolute; styled element inside the table would be positioned relative to the outer {{HTMLElement("div")}} rather than the table, which is the nearest positioned ancestor. This is a bug, and has not been fixed.

A position: absolute styled element within a positioned {{HTMLElement("div")}} element that has a display: table-cell style will become positioned relative to an outer block element instead of the containing {{HTMLElement("div")}}, similar to the behavior noted above.

Sticky positioning will only work in Firefox 26 (Gecko 26) if the about:config preference layout.css.sticky.enabled is set to true.

Internet Explorer notes

In Internet Explorer, fixed positioning doesn't work if the document is in quirks mode.

See also

  • {{CSS_Reference:Position}}

Revision Source

<div>
 {{CSSRef}}</div>
<h2 id="Summary">Summary</h2>
<p>The <code>position</code> <a href="/en-US/docs/CSS" title="CSS">CSS</a> property chooses alternative rules for positioning elements, designed to be useful for scripted animation effects.</p>
<p>{{cssbox("position")}}</p>
<p>A <strong>positioned element</strong> is an element whose <a href="/en-US/docs/CSS/computed_value" title="CSS/computed_value">computed</a> position property is <code>relative</code>, <code>absolute</code>,<code> fixed</code> or <code>sticky</code>.</p>
<p>An <strong>absolutely positioned element</strong> is an element whose <a href="/en-US/docs/CSS/computed_value" title="CSS/computed_value">computed</a> position property is <code>absolute</code> or <code>fixed</code>.</p>
<p>An <strong>relatively positioned element</strong> is an element whose <a href="/en-US/docs/CSS/computed_value" title="CSS/computed_value">computed</a> position property is <code>relative</code>.</p>
<p>A <strong>stickily positioned element</strong> is an element whose <a href="/en-US/docs/CSS/computed_value" title="CSS/computed_value">computed</a> position property is <code>sticky</code>.</p>
<p>The {{Cssxref("top")}}, {{Cssxref("right")}}, {{Cssxref("bottom")}}, and {{Cssxref("left")}} properties specify the position of positioned elements.</p>
<h2 id="Syntax">Syntax</h2>
<pre class="twopartsyntaxbox">
<a href="/en-US/docs/CSS/Value_definition_syntax" title="CSS/Value_definition_syntax">Formal syntax</a>: {{csssyntax("position")}}</pre>
<pre>
position: static
position: relative
position: absolute
position: fixed
position: sticky

position: inherit
</pre>
<h3 id="Values">Values</h3>
<dl>
 <dt>
  <code>static</code></dt>
 <dd>
  This keyword let the element use the normal behavior, that is it is laid out in its current position in the flow.&nbsp; The<code> top</code>,<code> right</code>,<code> bottom</code>, and <code>left</code> properties do not apply.</dd>
 <dt>
  <code>relative</code></dt>
 <dd>
  This keyword lays out all elements as though the element were not positioned, and then adjust the element's position, without changing layout (and thus leaving a gap for the element where it would have been had it not been positioned). The effect of <code>position:relative</code> on <code>table-*-group</code>, <code>table-row</code>, <code>table-column</code>, <code>table-cell</code>, and <code>table-caption</code> elements is undefined.</dd>
 <dt>
  <code>absolute</code></dt>
 <dd>
  Do not leave space for the element. Instead, position it at a specified position relative to its closest positioned ancestor or to the containing block. Absolutely positioned boxes can have margins, they do not collapse with any other margins.</dd>
 <dt>
  <span style="font-family: 'Courier New', 'Andale Mono', monospace; font-weight: inherit; line-height: normal;">fixed</span></dt>
 <dd>
  Do not leave space for the element. Instead, position it at a specified position relative to the screen's&nbsp;viewport and doesn't move when scrolled. When printing, position it at that fixed position on <em>every page</em>.</dd>
</dl>
<dl>
 <dt>
  <code style="font-size: 14px;">sticky</code>&nbsp;{{Experimental_inline}}</dt>
 <dd>
  The box position is calculated according to the normal flow (this is called the position in normal flow). Then the box is offset relative to its flow root and containing block and in all cases, including&nbsp;<code style="font-size: 14px;">table</code>&nbsp;elements, does not affect the position of any following boxes. When a box B is stickily positioned, the position of the following box is calculated as though B were not offset. The effect of ‘<code style="font-size: 14px;">position: sticky</code>’ on&nbsp;<code style="font-size: 14px;">table</code>&nbsp;elements is the same as for ‘<code style="font-size: 14px;">position: relative</code>’.</dd>
</dl>
<h2 id="Examples">Examples</h2>
<h3 id="Relative_positioning">Relative positioning</h3>
<p>To position an element relatively <code>20px</code> from the top and left of its normal position, the following CSS is used.</p>
<pre class="brush: css">
#two { position: relative; top: 20px; left: 20px; }
</pre>
<p>Note how the other elements are displayed as if "Two" were in its normal position and taking up space.</p>
<p><img alt="" src="/@api/deki/files/4922/=relative-positioning.png" style="width: 519px; height: 136px;" /></p>
<h3 id="Absolute_positioning">Absolute positioning</h3>
<p>Elements that are positioned relatively are still considered to be in the normal flow of elements in the document. In contrast, an element that is positioned absolutely is taken out of the flow and thus takes up no space when placing other elements. The absolutely positioned element is positioned relative to <em>nearest positioned ancestor</em>. If a positioned ancestor doesn't exist, the initial container is used.</p>
<p>In the example below, the blue ancestor div is positioned relative (so it becomes the nearest positioned ancestor) and box Two is positioned absolutely:</p>
<pre class="brush: css">
#ancestor { position: relative; background: #ddf; width: 500px; }
#two { position: absolute; top: 20px; left: 20px; }
</pre>
<p><img alt="" src="/@api/deki/files/4923/=absolute-positioning.png" style="width: 518px; height: 134px;" /></p>
<p>If #ancestor had not been positioned relative, box Two would have appeared relative to the upper left corner of the page.</p>
<h3 id="Fixed_positioning">Fixed positioning</h3>
<p>Fixed positioning is similar to absolute positioning, with the exception that the element's containing block is the viewport. This is often used to create a floating element that stays in the same position even after scrolling the page. In the example below the "One" box is fixed 80px from the top of the page and 20px from the left:</p>
<pre class="brush: css">
#one { position: fixed; top: 80px; left: 20px; }
</pre>
<p>When viewing the top of the page, the position box appears in the upper left, and after scrolling, it remains in the same place relative to the viewport:</p>
<p><img alt="fixed-1.png" class="internal lwrap" src="/@api/deki/files/4924/=fixed-1.png?size=thumb" style="width: 160px; height: 125px;" /></p>
<p><img alt="fixed-2.png" class="internal lwrap" src="/@api/deki/files/4925/=fixed-2.png?size=thumb" style="width: 160px; height: 100px;" /></p>
<h3 id="Fixed_positioning" style="line-height: 19.992000579833984px;">Sticky positioning</h3>
<p>Sticky positioning is a hybrid of relative and fixed positioning. &nbsp;The element is treated as relative positioned until it crosses a specified threshold, at which point it is treated as fixed positioned. &nbsp;For instance:</p>
<div>
 <pre class="brush: css" style="font-size: 12px;">
#one { position: sticky; top: 10px; }
</pre>
 <div>
  will behave just like a relatively positioned element until the viewport scrolls such that the element would be less than 10px from the top. &nbsp;Then, it will be fixed to 10px from the top until the viewport is scrolled back passed this threshold.</div>
 <div>
  &nbsp;</div>
 <div>
  Sticky positioning is commonly used for the headings in an alphabetized listing. &nbsp;The B heading will appear just below the items that begin with A until they are scrolled offscreen. &nbsp;Rather than sliding offscreen with the rest of the content, the B heading will then remain fixed to the top of the viewport until all the B items have scrolled offscreen, at which point it will be covered up by the C heading.</div>
 <div>
  &nbsp;</div>
 <div>
  <a href="http://jsfiddle.net/daker/ecpTw/light/"><code>Demo</code></a></div>
 <div>
  &nbsp;</div>
 <div>
  You must specify a threshold with at least one of&nbsp;<span style="line-height: 1.5;">{{Cssxref("top")}}, {{Cssxref("right")}}, {{Cssxref("bottom")}}, or {{Cssxref("left")}} for sticky positioning to behave as expected. &nbsp;Otherwise, it will be indistinguishable from relative positioning.</span></div>
 <div>
  &nbsp;</div>
</div>
<h2 id="Notes">Notes</h2>
<p>For relatively positioned elements, the {{Cssxref("top")}} or {{Cssxref("bottom")}} property specifies the vertical offset from the normal position and the {{Cssxref("left")}} or {{Cssxref("right")}} property specifies the horizontal offset.</p>
<p>For absolutely positioned elements, the {{Cssxref("top")}}, {{Cssxref("right")}}, {{Cssxref("bottom")}}, and {{Cssxref("left")}} properties specify offsets from the edge of the element's containing block (what the element is positioned relative to). The margin of the element is then positioned inside these offsets.</p>
<p><span style="line-height: 1.5;">Most of the time, absolutely positioned elements have </span><code style="font-size: 14px;">auto</code><span style="line-height: 1.5;"> values of {{Cssxref("height")}} and {{Cssxref("width")}} computed to fit the contents of the element. However, non-replaced absolutely positioned elements can be made to fill the available space by specifying (as other than </span><code style="font-size: 14px;">auto</code><span style="line-height: 1.5;">) both {{Cssxref("top")}} and {{Cssxref("bottom")}} and leaving {{Cssxref("height")}} unspecified (that is, </span><code style="font-size: 14px;">auto</code><span style="line-height: 1.5;">). Likewise for {{Cssxref("left")}}, {{Cssxref("right")}}, and {{Cssxref("width")}}.</span></p>
<p>Except for the case just described of absolutely positioned elements filling the available space:</p>
<ul>
 <li>If both {{Cssxref("top")}} and {{Cssxref("bottom")}} are specified (technically, not <code>auto</code>), {{Cssxref("top")}} wins.</li>
 <li>If both {{Cssxref("left")}} and {{Cssxref("right")}} are specified, {{Cssxref("left")}} wins when {{Cssxref("direction")}} is <code>ltr</code> (English, horizontal Japanese, etc.) and {{Cssxref("right")}} wins when {{Cssxref("direction")}} is <code>rtl</code> (Persian, Arabic, Hebrew, etc.).</li>
</ul>
<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('CSS2.1', 'visuren.html#propdef-position', 'position')}}</td>
   <td>{{Spec2('CSS2.1')}}</td>
   <td>&nbsp;</td>
  </tr>
  <tr>
   <td>{{SpecName('CSS3 Positioning')}}</td>
   <td>{{Spec2('CSS3 Positioning')}}</td>
   <td>Adds <code>sticky</code> property value</td>
  </tr>
 </tbody>
</table>
<h2 id="Browser_compatibility" name="Browser_compatibility">Browser compatibility</h2>
<div>
 {{CompatibilityTable}}</div>
<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 (WebKit)</th>
   </tr>
   <tr>
    <td>Basic support</td>
    <td>1.0</td>
    <td>1.0 (1.0) ({{anch("Gecko notes", "See notes")}})</td>
    <td>4.0</td>
    <td>4.0</td>
    <td>1.0 (85)</td>
   </tr>
   <tr>
    <td><code>fixed </code>value</td>
    <td>1.0</td>
    <td>1.0 (1.0)</td>
    <td>7.0</td>
    <td>4.0</td>
    <td>1.0 (85)</td>
   </tr>
   <tr>
    <td><code>sticky</code> value</td>
    <td>{{CompatVersionUnknown()}}</td>
    <td>26 (26.0) ({{anch("Gecko notes", "See notes")}})</td>
    <td>{{CompatUnknown}}</td>
    <td>{{CompatUnknown}}</td>
    <td>6.1 {{ property_prefix("-webkit-") }}</td>
   </tr>
  </tbody>
 </table>
</div>
<div id="compat-mobile">
 <table class="compat-table">
  <tbody>
   <tr>
    <th>Feature</th>
    <th>Android</th>
    <th>Firefox Mobile (Gecko)</th>
    <th>IE Phone</th>
    <th>Opera Mobile</th>
    <th>Safari Mobile</th>
   </tr>
   <tr>
    <td>Basic support</td>
    <td>{{CompatUnknown}}</td>
    <td>1.0 (1.0) ({{anch("Gecko notes", "See notes")}})</td>
    <td>{{CompatUnknown}}</td>
    <td>{{CompatUnknown}}</td>
    <td>{{CompatUnknown}}</td>
   </tr>
  </tbody>
 </table>
</div>
<h3 id="Gecko_notes">Gecko notes</h3>
<p>In Gecko, if you have a positioned {{HTMLElement("table")}} element inside a positioned block element, such as a {{HTMLElement("div")}}, a <code>position: absolute;</code> styled element inside the table would be positioned relative to the outer {{HTMLElement("div")}} rather than the table, which is the nearest positioned ancestor. This is <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=63895">a bug</a>, and has not been fixed.</p>
<p>A <code>position: absolute</code> styled element within a positioned {{HTMLElement("div")}} element that has a <code>display: table-cell</code> style will become positioned relative to an outer block element instead of the containing {{HTMLElement("div")}}, similar to the behavior noted above.</p>
<p>Sticky positioning will only work in Firefox 26 (Gecko 26) if the <code>about:config</code> preference <code>layout.css.sticky.enabled</code> is set to <code>true</code>.</p>
<h3 id="Internet_Explorer_notes">Internet Explorer notes</h3>
<p>In Internet Explorer, fixed positioning doesn't work if the document is in <a href="http://msdn.microsoft.com/en-us/library/ie/ms531140(v=vs.85).aspx" title="position Property - MSDN">quirks mode</a>.</p>
<h2 id="See_also">See also</h2>
<ul>
 <li>{{CSS_Reference:Position}}</li>
</ul>
Revert to this revision