Please note, this is a STATIC archive of website developer.mozilla.org from 03 Nov 2016, cach3.com does not collect or store any user information, there is no "phishing" involved.

概要

CSS のデータ型 <position> は 2 次元空間上の座標を示し、特定のボックスからの相対的な位置設定に使われます。

座標は、 2 つのキーワードと一定のオフセットを使って定められます。キーワードは、要素の一辺、または二辺間の中央線を表します: leftrighttopbottom または center(これはコンテキストによって、左辺と右辺の中央線と、上辺と下辺の中央線のどちらも表します)。

オフセットは <percentage> で表される相対値か、絶対値 <length> のいずれかになります。正の数は右向きか下向きのどちらか適当なほうのオフセットです。負の数は残りの方向へのオフセットです。

<position> が表す最終的な位置は、要素のボックス内にある必要はありません。

オフセットが関連したキーワードで与えられない場合、center であるものと想定されます。

補間

横座標と縦座標の値の補間は別々に行われます。速度がどちらの座標に対しても同一の <timing-function> で定義されている限り、点は線上を動きます。

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つとる構文 */
キーワード                  /* 辺。残りは辺の中央 center に調整される */
<長さ> または <パーセンテージ> /* X軸上の位置になり、Y軸上の位置は 50% になる */

/* 値を2つとる構文 */
キーワード キーワード          /* 関連性のない向きの組み合わせ */
キーワード 値            /* 値はキーワードで定義した辺に対するオフセット */

/* 値を2つとる、固定オフセットによる構文 */

仕様

仕様書 策定状況 コメント
CSS Values and Units Module Level 3
The definition of '<position>' in that specification.
勧告候補 要件の矛盾をなくすため、両定義へのリンクを再掲。CSS Backgrounds and Borders Module Level 3 がサポートされれば、そこにある <position> の定義も使う必要があります。
CSS Backgrounds and Borders Module Level 3
The definition of '<position>' in that specification.
勧告候補 <position> を明示的に定義し、辺からのオフセットをサポートするように拡張。
CSS Level 2 (Revision 1)
The definition of '<position>' in that specification.
勧告 <length><percentage> 値とキーワードの組み合わせを許可。
CSS Level 1
The definition of '<position>' in that specification.
勧告 <position>background-position の値の匿名として定義。

ブラウザ実装状況

機能 Chrome Firefox (Gecko) Internet Explorer Opera Safari
基本サポート 1.0 1.0 (1.7 or earlier) 4.0 3.5 1.0 (85)
Combination of a keyword and a <length> or <percentage> 1.0 1.0 (1.7 or earlier) 4.0 3.5 1.0 (85)
Four-value syntax (support for offset from any edge) 未サポート WebKit bug 37514 13.0 (13.0) 未サポート 10.5 未サポート WebKit bug 37514
機能 Android Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
基本サポート (有) 1.0 (1) (有) (有) (有)
Combination of a keyword and a <length> or <percentage> (有) 1.0 (1) (有) (有) (有)
Four-value syntax (support for offset from any edge) 未サポート 13.0 (13.0) ? ? 未サポート

ドキュメントのタグと貢献者

タグ: 
 このページの貢献者: mrstork, fscholz, teoli, ethertank, sosleepy
 最終更新者: mrstork,