position

  • Revision slug: CSS/position
  • Revision title: position
  • Revision id: 25388
  • Created:
  • Creator: TigerSoldier
  • Is current revision? No
  • Comment

Revision Content

{{ CSSRef() }}

Summary

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

  • {{ Xref_cssinitial() }}: {{ Cssxref("static") }}
  • Applies to: all elements
  • {{ Xref_cssinherited() }}: no
  • Media: {{ Xref_cssvisual() }}
  • {{ Xref_csscomputed() }}: as specified

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

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

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

Syntax

position: static | relative | absolute | fixed | inherit

Values

static 
Normal behavior.
relative 
Lay 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).
absolute 
Do not leave space for the element. Instead, position it at a specified position relative to its closest positioned ancestor or to the initial containing block.
fixed 
Do not leave space for the element. Instead, position it at a specified position relative to the viewport, which does not scroll when the page is scrolled. (Or, when printing, position it at that fixed position on every page.)

Examples

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 (Arabic, Hebrew, etc.).

Specifications

Browser compatibility

See also

{{ Cssxref("display") }}, {{ Cssxref("float") }}, {{ Cssxref("top") }}, {{ Cssxref("right") }}, {{ Cssxref("bottom") }}, {{ Cssxref("left") }}

{{ languages( { "es": "es/CSS/position", "fr": "fr/CSS/position", "zh-cn": "cn/CSS/position" } ) }}

Revision Source

<p> {{ CSSRef() }}
</p>
<h3 name="Summary"> Summary </h3>
<p>The position property chooses alternative rules for positioning elements, designed to be useful for scripted animation effects.
</p>
<ul><li> {{ Xref_cssinitial() }}: {{ Cssxref("static") }}
</li><li> Applies to: all elements
</li><li> {{ Xref_cssinherited() }}: no
</li><li> Media: {{ Xref_cssvisual() }}
</li><li> {{ Xref_csscomputed() }}: as specified
</li></ul>
<p>A <b>positioned element</b> is an element whose <a href="en/CSS/computed_value">computed</a> position property is <code>relative</code>, <code>absolute</code>, or <code>fixed</code>.
</p><p>An <b>absolutely positioned element</b> is an element whose <a href="en/CSS/computed_value">computed</a> position property is <code>absolute</code> or <code>fixed</code>.
</p><p>The {{ Cssxref("top") }}, {{ Cssxref("right") }}, {{ Cssxref("bottom") }}, and {{ Cssxref("left") }} properties specify the position of positioned elements.
</p>
<h3 name="Syntax"> Syntax </h3>
<p>position: static | relative | absolute | fixed | <a href="en/CSS/inherit">inherit</a>
</p>
<h3 name="Values"> Values </h3>
<dl><dt> static </dt><dd> Normal behavior.
</dd><dt> relative </dt><dd> Lay 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).
</dd><dt> absolute </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 initial containing block.
</dd><dt> fixed </dt><dd> Do not leave space for the element. Instead, position it at a specified position relative to the viewport, which does not scroll when the page is scrolled. (Or, when printing, position it at that fixed position on <i>every page</i>.)
</dd></dl>
<h3 name="Examples"> Examples </h3>
<h3 name="Notes"> Notes </h3>
<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>Most of the time, absolutely positioned elements have <code>auto</code> 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 <code>auto</code>) both {{ Cssxref("top") }} and {{ Cssxref("bottom") }} and leaving {{ Cssxref("height") }} unspecified (that is, <code>auto</code>). Likewise for {{ Cssxref("left") }}, {{ Cssxref("right") }}, and {{ Cssxref("width") }}.
</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> (Arabic, Hebrew, etc.).
</li></ul>
<h3 name="Specifications"> Specifications </h3>
<ul><li> <a class="external" href="http://www.w3.org/TR/CSS21/visuren.html#propdef-position">CSS 2.1</a>
</li></ul>
<h3 name="Browser_compatibility"> Browser compatibility </h3>
<h3 name="See_also"> See also </h3>
<p>{{ Cssxref("display") }}, {{ Cssxref("float") }}, {{ Cssxref("top") }}, {{ Cssxref("right") }}, {{ Cssxref("bottom") }}, {{ Cssxref("left") }}
</p>
<div class="noinclude">
</div>
{{ languages( { "es": "es/CSS/position", "fr": "fr/CSS/position", "zh-cn": "cn/CSS/position" } ) }}
Revert to this revision