mozilla

Revision 291245 of <position>

  • Revision slug: CSS/position_value
  • Revision title: position (CSS data type)
  • Revision id: 291245
  • 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.

Interpolation

...

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 */

/* 2-value syntax */

/* 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 offset to the keywords.
{{ SpecName('CSS2.1', 'colors.html#background-properties', '&lt;position&gt;') }} {{ Spec2('CSS2.1) }} 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>
<h2 id="Interpolation">Interpolation</h2>
<p>...</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 */

/* 2-value syntax */

/* 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 offset to the keywords.</td>
    </tr>
    <tr>
      <td>{{ SpecName('CSS2.1', 'colors.html#background-properties', '&amp;lt;position&amp;gt;') }}</td>
      <td>{{ Spec2('CSS2.1) }}</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