<position>

  • Revision slug: CSS/position_value
  • Revision title: position (CSS data type)
  • Revision id: 293238
  • Created:
  • Creator: teoli
  • Is current revision? No
  • Comment

Revision Content

{{ CSSRef() }}

{{ draft() }}

Summary

The <position> CSS data type denotes a coordinate in a 2D space used to set a location relative to a box.

A specific coordinate can be given by a two keywords, with specific offsets. A keyword represent one edge of the element's box or the medium line between two edges: left, right, top, bottom or center (which represents either the center between the left and right edges, or the center between the top or bottom edges, depending on the context).

{{ experimental_inline() }}An offset can be either a relative value, expressed as a {{ xref_csspercentage() }}, or an absolute {{ xref_csslength() }} value. Positive values are offset towards the right or towards the bottom, whichever is suitable. Negative values are offset in the other directions.

The final position described by the <position> value does not need to be inside the element's box.

If an offset is given without an associated keywords, this one is assumed to be center.

Interpolation

Both the abscisses and ordinate values are interpolated independantly. As the speed is defined by the same {{ xref_csstimingfunction() }} for both, the point will move following a line.

Values

Formal grammar: [ [ left | center | right | top | bottom | <percentage> | <length> ] |
                  [ left | center | right | <percentage> | <length> ] [ top | center | bottom | <percentage> | <length> ] |
                  [ center | [ left | right ] [ <percentage> | <length> ]? ] && 
                  [ center | [ top | bottom ] [ <percentage> | <length> ]? ]
                ]
/* 1-value syntax */
keyword                  /* The corresponding edge, the other direction is corresponding to center, the middle of the edge */
<length> or <percentage> /* The position on the x-axis, 50% for the y-axis */

/* 2-value syntax */
keyword keyword          /* A keyword for each direction, the order is irrelevant */
keyword value            /* The value is the offset for the edge defined by the keyword */

/* 2-value syntax with fixed offset */

Specification

Specification Status Comment
{{ SpecName('CSS3 Values', '#position', '&lt;position&gt;') }} {{ Spec2('CSS3 Values') }} Relists links to both definition, with the requirement to be coherent: if {{ SpecName('CSS3 Backgrounds', '', '') }} is supported, its definition of <position> must be used too.
{{ SpecName('CSS3 Backgrounds', '#ltpositiongt', '&lt;position&gt;') }} {{ Spec2('CSS3 Backgrounds') }} Extends it to support offsets from the edges. {{ experimental_inline() }}
{{ SpecName('CSS2.1', 'colors.html#background-properties', '&lt;position&gt;') }} {{ Spec2('CSS2.1') }}  
{{ SpecName('CSS1', '#background-position', '<position>') }} {{ Spec2('CSS1') }} Defines <position> anonymously as the value of {{ cssxref("background-position") }}.

Browser compatibility

See also

  • CSS Data Types : {{ CSSDataTypes() }}

Revision Source

<p>{{ CSSRef() }}</p>
<p>{{ draft() }}</p>
<h2 id="Summary">Summary</h2>
<p>The <code>&lt;position&gt;</code> <a href="/en/CSS" title="CSS">CSS</a> data type denotes a coordinate in a 2D space used to set a location relative to a box.</p>
<p><img alt="" src="/files/3796/position_type.png" style="width: 306px; height: 208px; float: left;" />A specific coordinate can be given by a two keywords, with specific offsets. A keyword represent one edge of the element's box or the medium line between two edges: <code>left</code>, <code>right</code>, <code>top</code>, <code>bottom</code> or <code>center</code> (which represents either the center between the left and right edges, or the center between the top or bottom edges, depending on the context).</p>
<p>{{ experimental_inline() }}An offset can be either a relative value, expressed as a {{ xref_csspercentage() }}, or an absolute {{ xref_csslength() }} value. Positive values are offset towards the right or towards the bottom, whichever is suitable. Negative values are offset in the other directions.</p>
<p>The final position described by the <code>&lt;position&gt;</code> value does not need to be inside the element's box.</p>
<p>If an offset is given without an associated keywords, this one is assumed to be <code>center</code>.</p>
<h2 id="Interpolation" style="clear:both;">Interpolation</h2>
<p>Both the abscisses and ordinate values are interpolated independantly. As the speed is defined by the same {{ xref_csstimingfunction() }} for both, the point will move following a line.</p>
<h2 id="Values">Values</h2>
<pre class="twopartsyntaxbox">
Formal grammar: [ [ left | center | right | top | bottom | <var>&lt;percentage&gt;</var> | <var>&lt;length&gt;</var> ] |
                  [ left | center | right | <var>&lt;percentage&gt;</var> | <var>&lt;length&gt;</var> ] [ top | center | bottom | <var>&lt;percentage&gt;</var> | <var>&lt;length&gt;</var> ] |
                  [ center | [ left | right ] [ <var>&lt;percentage&gt;</var> | <var>&lt;length&gt;</var> ]? ] &amp;&amp; 
                  [ center | [ top | bottom ] [ <var>&lt;percentage&gt;</var> | <var>&lt;length&gt;</var> ]? ]
                ]
</pre>
<pre>
/* 1-value syntax */
<em>keyword<code>                  /* The corresponding edge, the other direction is corresponding to center, the middle of the edge */
&lt;length&gt; or &lt;percentage&gt; /* The position on the x-axis, 50% for the y-axis */</code></em>

/* 2-value syntax */
<em>keyword</em> <em>keyword</em>          /* A keyword for each direction, the order is irrelevant */
<em>keyword </em><code><em>value</em></code><em>            </em>/* The value is the offset for the edge defined by the keyword */

/* 2-value syntax with fixed offset */
</pre>
<h2 id="Specification">Specification</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 Values', '#position', '&amp;lt;position&amp;gt;') }}</td>
      <td>{{ Spec2('CSS3 Values') }}</td>
      <td>Relists links to both definition, with the requirement to be coherent: if {{ SpecName('CSS3 Backgrounds', '', '') }} is supported, its definition of <code>&lt;position&gt;</code> must be used too.</td>
    </tr>
    <tr>
      <td>{{ SpecName('CSS3 Backgrounds', '#ltpositiongt', '&amp;lt;position&amp;gt;') }}</td>
      <td>{{ Spec2('CSS3 Backgrounds') }}</td>
      <td>Extends it to support offsets from the edges. {{ experimental_inline() }}</td>
    </tr>
    <tr>
      <td>{{ SpecName('CSS2.1', 'colors.html#background-properties', '&amp;lt;position&amp;gt;') }}</td>
      <td>{{ Spec2('CSS2.1') }}</td>
      <td>&nbsp;</td>
    </tr>
    <tr>
      <td>{{ SpecName('CSS1', '#background-position', '&lt;position&gt;') }}</td>
      <td>{{ Spec2('CSS1') }}</td>
      <td>Defines <code>&lt;position&gt;</code> anonymously as the value of {{ cssxref("background-position") }}.</td>
    </tr>
  </tbody>
</table>
<h2 id="Browser_compatibility">Browser compatibility</h2>
<h2 id="See_also">See also</h2>
<ul>
  <li>CSS Data Types : {{ CSSDataTypes() }}</li>
</ul>
Revert to this revision